在尝试为移动页面制作一些幻灯片时,我遇到了过渡和 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!!!!"); });
单击下方的行时会触发两次
是否有解决此问题或已知问题的方法?