javascript - 如何替换 CSS3 过渡

Question

我正在尝试将 CSS 过渡应用于元素，但在它完成之前的某个时刻，完全删除过渡并开始另一个过渡。

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

http://jsfiddle.net/zXVLd/

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

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

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

Answer 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/。

Answer 2

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

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/

Answer 3

要做这种动画，可以尝试使用 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
        }
    });
});