Question

我正在运行一个简单的原生元素.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'
});

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

问题是在动画结束后我无法为该元素设置任何变换样式。变换的适当性似乎已经冻结。

“解冻”该礼仪的唯一方法是在该动画上调用.cancel（），但随后，该元素将恢复到其初始状态。

2014年10月29日更新

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

您可以使用“fill：both”不再“解冻”动画。如果你想在之后操纵样式，你需要“填充：向后”：

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

Answer 1

你能用这个吗？

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/

element.animate，在动画结束后应用样式更改

1 个答案: