2

嗨，我正在尝试使用 jquery 的 .one 方法将函数绑定到 webkitTransitionEnd。当我做： 

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

它不会取消绑定到 transitionend 事件。相反，它每次进行转换时都会删除该类

继承人的jsfiddle：http: //jsfiddle.net/DVC5A/

好的，我在 SO 上找到了这个解决方案：

如何规范跨浏览器的 CSS3 转换函数？

4

3 回答 3

4

不要使用one() ... 使用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);

    });

}
于 2013-05-27T01:01:46.597 回答
3

.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/

于 2013-05-26T22:09:49.467 回答
1

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

$(".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);
    });
});

因此，每次单击按钮时，您都会重新绑定transitionEnd事件one()更多时间，因为事件处理程序位于按钮的单击事件处理程序中，所以每次单击按钮时它当然会删除该类？

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

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");
});

$(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
    setTimeout(function () {
        $(".block").removeClass("in");
    }, 3000);
});
于 2013-05-26T21:50:46.467 回答