javascript - CSS3 存储当前动画值

Question

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

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

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

Answer 1

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

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

这currentTransform将是一个转换矩阵，您需要从中计算值。

这是一个如何工作的jsfiddle。

Answer 2

我敢打赌你访问当前的旋转值，就像任何其他 css 值一样。

Javascript：

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