元素.动画，在动画完成后应用样式更改

element.animate, applying style changes after the animation is finished

本文关键字：动画 应用 样式 元素      更新时间：2023-09-26

我正在运行一个简单的原生元素。

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'
});

小提琴:http://jsfiddle.net/tox47k28/

问题是，动画结束后，我不能设置任何转换样式到该元素。转换的适当性似乎冻结了。

要"解冻"该属性的唯一方法是对该动画调用.cancel()，但随后，元素会恢复到初始状态。

UPDATE 29 OCT 2014

演示:http://jsfiddle.net/f27hpnjL/1/

你不能再用"fill: both"来"unfreeze"动画了。如果你想操作样式之后，你需要"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)"    
}
http://jsfiddle.net/tox47k28/2/

相关文章：