Question

我正在尝试将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);

我想要的是盒子重置它的位置并在点击时向下移动，以及第一次过渡到而不是的完成处理程序。

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

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

要执行此类动画，您可以尝试使用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
        }
    });
});

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

小提琴 - ＆gt; http://jsfiddle.net/krasimir/zXVLd/2/

如何替换CSS3过渡

3 个答案: