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

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

Fiddle: http://jsfiddle.net/tox47k28/

问题是动画结束后，无法为该元素设置任何变换样式。变换属性似乎被冻结了。

唯一解决方法是在该动画上调用 .cancel()，但这会使元素恢复到其初始状态。

更新于 2014 年 10 月 29 日

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

您现在不能再使用 "fill: both" 来 "解冻" 动画。如果您想在之后操作样式，需要使用 "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();
}

- Mircea

---

你可以使用GroupEffect或SequenceEffect来进一步转换你的元素。这仅适用于你的转换不是由鼠标位置（例如拖动）决定的情况。 - Mirceac21

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/

- christianalfoni

---

CSS变换在Chrome 36中取消了前缀。http://www.chromestatus.com/features/6437640580628480 - ebidel

似乎不需要setTimeout就能工作。只需要首先调用animation.cancel()。 - ebidel

啊，抱歉，我先尝试了其他方法。忘记移除超时了 :-) 已更新。 - christianalfoni

是的，那是我的第一种方法，但看起来像是一个hack。希望有其他方法而不必调用cancel()。在这种情况下，您必须设置所有已动画化的属性。 - Mircea