CSS3存储当前动画值
CSS3 storing current animation values
我有一个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-;
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 将作用域存储在JSON中
- 使用javascript存储变量的最安全方式
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用数据上的角度更改设置集合的第一个元素的动画
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- CSS3存储当前动画值
- 我如何动画元素存储在一个数组?除了我徘徊在上面的那个
- 如何显示动画多个标记从坐标存储在MySQL数据库
- 动画高度到自动存储高度- slideUp with velocity.js