TransitionEnd堆叠事件

时间:2013-05-24 14:17:20

标签: jquery webkit css-transitions

当尝试为移动页面做一些幻灯片时,我遇到了transition和transitionEnd的问题

$(document).on('click', '#map_view', function () {
    var lpw = $('.list-page-wrap'), mpw = $('#map_view_page'), smb = $('.slide-me-back');
    lpw.css("-webkit-transform", "translate3d(100%, 0, 0)");
    lpw.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () { mpw.css("-webkit-transform", "translate3d(0, 0, 0)"); console.log ("ERROR!!!!"); });
});

$(document).on('click', '#list_view', function () {
    var lpw = $('.list-page-wrap'), mpw = $('#map_view_page');
    mpw.css("-webkit-transform", "translate3d(100%, 0, 0)");
    mpw.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () { lpw.css("-webkit-transform", "translate3d(0, 0, 0)"); });
});

上面的代码中的

lpw.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () { mpw.css("-webkit-transform", "translate3d(0, 0, 0)"); console.log ("ERROR!!!!"); });
单击较低的

时,

行会被触发两次

是针对此问题还是已知问题的解决方法?

1 个答案:

答案 0 :(得分:0)

我在另一个帖子中找到了解决方案,我错过的是:

$(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd'); 

感谢您的帮助