Question

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

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

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

Answer 1

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

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

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

以下是jsfiddle的工作原理。

Answer 2

我会像任何其他css值一样下注你当前的旋转值。

使用Javascript：

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

CSS3存储当前动画值

2 个答案: