为什么这个回调在完成一个动画后不解除自身与transitionEnd的绑定?

Question

我试图使用jquery的。one方法绑定一个函数到webkitTransitionEnd。当我这样做的时候:

$element.one( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function(e) { 
    $element.removeClass( ".alert-resets" ) 
 });

它不会解除与transitionend事件的绑定。相反，它会在每次执行转换

时删除该类。

这里是jsfiddle: http://jsfiddle.net/DVC5A/

ok，我在SO上找到了这个解决方案:

如何规范跨浏览器的CSS3过渡函数?

Answer 1

不要使用一个()…使用on()(像正常一样)，然后在转换结束事件处理程序结束时使用off()解除绑定事件处理程序。

$("#button-element").on('click', function(e){
    var transEnd = 
        "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd";
    // ... trigger your css3 transition
    $('#el').addClass('whatever');
    // then ...
    $('#el').on(transEnd, function (e) {
        // do stuff
        $('#el').removeClass('whatever');
        //unbind event handler
        $('#el').off(transEnd);
    });
}

Answer 2

.one()的文档明确声明:"如果第一个参数包含多个以空格分隔的事件类型，则为每种事件类型调用一次事件处理程序".

我不知道是否有一个更合适的方法来处理这种类型的事件(监听只有一个事件名称可能会工作，但我不知道如何跨浏览器工作)。但是在任何情况下，您都可以使用.off()自行解除绑定，并且可以使用事件命名空间使其更容易:

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");
    $(".block").on("transitionend.my MSTransitionEnd.my webkitTransitionEnd.my oTransitionEnd.my", function (e) {
        var el = $(this);
        el.off('.my');
        setTimeout(function () {
            el.removeClass("in");
        }, 3000);
    });
});

JSFiddle: http://jsfiddle.net/DVC5A/6/

Answer 3

我真的不明白你想做什么，但我还是要试试?这是你的代码:

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");
    $(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
        console.log('pl')
        setTimeout(function () {
            $(".block").removeClass("in");
        }, 3000);
    });
});

所以每次你点击按钮，你为one()重新绑定transitionEnd事件更多的时间，因为事件处理程序是在按钮的点击事件处理程序，所以当然它删除类每次你点击按钮?

要在每次加载文档时只附加一次transitionEnd事件处理程序，只需将事件处理程序移出按钮的单击函数?

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");
});
$(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
    setTimeout(function () {
        $(".block").removeClass("in");
    }, 3000);
});