CSS3存储当前动画值

CSS3 storing current animation values

本文关键字:动画 存储 CSS3      更新时间:2023-09-26

我有一个div正在做旋转动画,比如:

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

我想做的是,当我触发一个事件(比如鼠标点击)时,我想在一个变量中存储动画的当前rotateY。例如,如果在动画处于140度左右时触发了单击事件,我希望将140度存储在变量中。有人知道如何返回当前的rotateY值吗?tnx!

要获得任何css值,可以调用窗口的getComputedStyle方法并将动画元素传递给它:

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

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

以下是它的工作原理。

我敢打赌,您的访问权限与任何其他css值一样,都是当前的轮换值。

Javascript:

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