CSS3 存储当前动画值答案

【问题标题】：CSS3 storing current animation valuesCSS3 存储当前动画值
【发布时间】：2012-01-16 16:59:32
【问题描述】：

我有一个 div 正在做这样的旋转动画：

@-webkit-keyframes animateCamera {
    from {-webkit-transform: translateZ(300px) rotateY(0deg);}
    to {-webkit-transform: translateZ(300px) rotateY(360deg);}}
}

我想要发生的是，当我触发一个事件（让我们说一个鼠标点击）时，我想将动画的当前 rotateY 存储在一个变量中。例如，如果在动画大约 140 度时触发了点击事件，我希望将 140 度存储在一个变量中。有人知道如何返回当前的 rotateY 值吗？ tnx！

【问题讨论】：

有趣。我只是在转换期间搜索了 javascript 事件，但只能找到 transitionEnd 事件。也许您可以每 x 毫秒手动设置一次翻译属性？

标签： javascript html css css-animations

【解决方案1】：

要获取任何 css 值，您可以调用窗口的 getComputedStyle 方法并将动画元素传递给它：

var animatedEl = document.getElementById('#myAnimatedEl');
var styles = window.getComputedStyle(animatedEl);
var currentTransform = styles.getPropertyCSSValue('-webkit-transform').cssText;

currentTransform 将是 transformation matrix，您需要从中计算值。

这是一个jsfiddle，它是如何工作的。

【讨论】：

你应该使用 styles.getPropertyValue('-webkit-transform') 而不是 styles.getPropertyCSSValue('-webkit-transform').cssText，因为 getPropertyCSSValue() 可能会被 W3C 弃用。此外，您还应该检查无前缀属性 transform 的值。来源：link

【解决方案2】：

我敢打赌，您可以像访问任何其他 css 值一样访问当前轮换值。

Javascript：

var item = document.getElementById["yourId"];
var currentValueForAttribute = item.style.-attribute here-;

【讨论】：

这不起作用先生，因为transformValues就像称为“transform”的样式的子内容。就像“-webkit-trasnform: rotateY(?deg);”
啊；因此“我会打赌”。为了完整起见，我将答案留在这里，因此没有其他人提出类似的无效方法。