jquery - 重新调整动画链中的过渡速度

Question

以下代码 (1) 将图像向下并向左移动，(2) 将其旋转 180 度，(3) 然后将其向右穿过屏幕。

jsFiddle here

请注意，当对象旋转时，动画过渡速度会减慢，因此它看起来像是在转动，而不仅仅是翻转。

问题是这会导致动画的第 3 部分也进行得非常缓慢......不再是爆炸，更像是莫西。

$('.moving_image').delay(7000).animate({
    'left' : '18%',
    'top' : '55%',
    'width': '5vw'
},5500,function(){
        $('.moving_image').css({'transform':'rotateY(180deg)','transition-duration':'2s'});
        $('.moving_image').delay(2000).css({'transition-duration':'0s'}).animate({
            'left' : '101%',
            'top'  : '50%',
            'width': '15vw'
        },200,'easeInExpo')
});

请注意第 7 行重新调整动画速度的尝试失败，并添加了以下代码段:

.delay(2000).css({'transition-duration':'0s'})

遗憾的是，它只是否定了之前的 2s 减速。

Answer 1

您可以使用额外的animate 函数来更改transition-duration: http://jsfiddle.net/mpsyLooo/4/

顺便说一句，我真的很推荐TimelineMax或 CSS3 keyframes像这样的动画。