我正在运行一个简单的原生 element.animate:
element.animate([{
transform: "translate(0px, 0)"
}, {
transform: "translate(200px, 0)"
}], {
duration: 1000,
iterations: 1,
delay: 0,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
direction: 'normal',
fill: 'both'
});
fiddle :http://jsfiddle.net/tox47k28/
问题是动画结束后我无法为该元素设置任何变换样式。转换属性似乎卡住了。
“解冻”该礼仪的唯一方法是对该动画调用 .cancel(),但随后,该元素将恢复到其初始状态。
2014 年 10 月 29 日更新
演示:http://jsfiddle.net/f27hpnjL/1/
您不能再使用“填充:两者”“解冻”动画。如果你想在之后操作样式,你需要“fill: backwards”:
element.animate([{
transform: "translate(0px, 0)"
}, {
transform: "translate(200px, 0)"
}], {
duration: 1000,
iterations: 1,
delay: 0,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
direction: 'normal',
fill: 'backwards' // Use this inorder to manipulate the style attribute after animation end
}).onfinish = function(e){
// I wish I had a refference to my keyframes here!!!
// Reset the last keyFrame
element.style.webkitTransform = "translate(200px, 0)";
// Cancel the animation
this.cancel();
}
最佳答案
你能用这个吗?
var animation = element.animate([{
transform: "translate(0px, 0)"
}, {
transform: "translate(200px, 0)"
}], {
duration: 1000,
iterations: 1,
delay: 0,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
direction: 'normal',
fill: 'both'
});
animation.onfinish = function () {
animation.cancel();
element.style.transform = "translate(400px, 0)"
}
关于javascript - element.animate,在动画完成后应用样式更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25423684/