如何替换 CSS3 过渡答案

【问题标题】：How to replace a CSS3 transition如何替换 CSS3 过渡
【发布时间】：2013-08-27 05:21:30
【问题描述】：

我正在尝试对元素应用 CSS 过渡，但在完成之前的某个时间点，完全移除过渡并开始另一个过渡。

This question 回答了如何在其轨道中停止过渡，但我修改了那里的 jsFiddle 来说明问题：

var $div = $('div');
$div.click(function(){
    $div.css({
        left: 0,
        transition: 'none'
    });
    $div.transit({
        top: 600,
    },5000);
});

function complete(){
    $div.css('backgroundColor', 'blue');
}

$div.transit({left: 600}, 5000, 'linear', complete);

我想要发生的是让框重置其位置并在单击时向下移动，以及在第一次转换为 not 触发时完成的处理程序。

实际发生的情况是，框会在单击时重置其位置，但在第一次转换完成之前不会向下移动（即使第一次转换的动作不再发生）。完成的处理程序仍然会在第一次转换时触发。

【问题讨论】：

标签： javascript jquery css css-transitions css-animations

【解决方案1】：

我已经用clearQueue 方法更新了你的小提琴：http://jsfiddle.net/zXVLd/1/

var $div = $('div');
$div.click(function(){
    $div.clearQueue().css('left', $div.css('left')).transit({
        top: 600,
    },5000);
});

function complete(){
    $div.css('backgroundColor', 'blue');
}

$div.transit({left: 600}, 5000, 'linear', complete);

这就是诀窍。有关 clearQueue 方法的更多信息，请参阅http://api.jquery.com/clearQueue/。

【讨论】：

完整的处理程序仍在触发，但我也许可以解决这个问题。谢谢！

【解决方案2】：

要制作这种动画，可以尝试使用 GSAP 的 TweenLite。你可以用它实现令人难以置信的成就。 http://www.greensock.com/jump-start-js/如果你在你的页面中包含这个并添加以下代码：

    div.bind('click', function(e) {
    // note that you can animate two directions, from and to
    TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
        // the css, but for positioning elements you can also use x and y.
        x: 600,
        easing: linear,
        onStart: function() {
            Stuff you want to do before the animation
        },
        onComplete: function() {
            Stuff you want to do after animationg
        }
    });
});

【讨论】：

【解决方案3】：

您使用的插件正在使用队列。所以，调用 $div.dequeue(); 就足够了。即

var $div = $('div');
$div.click(function(){
    $div.dequeue();
    $div.css({
        left: 0,
        top: 0,
        transition: 'none'
    });
    $div.transit({
        top: 600,
    },5000);
});

function complete(){
    $div.css('backgroundColor', 'blue');
}

$div.transit({left: 600}, 5000, 'linear', complete);

小提琴 -> http://jsfiddle.net/krasimir/zXVLd/2/

【讨论】：