0

我正在尝试将 DOM 中的这段代码从 jQuery 转换为标准 JS：

$(document).ready(function(){
    $('#main').addClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        $('#gut').addClass('overflow-hidden');
    });
});

我已经这样做了：

var main = document.getElementById('main');
var gut = document.getElementById('gut');
main.classList.add('slide-out');

main.addEventListener('webkitTransitionEnd',listener);
main.addEventListener('otransitionend',listener);
main.addEventListener('oTransitionEnd',listener);
main.addEventListener('msTransitionEnd',listener);
main.addEventListener('transitionend',listener);

var listener = function(){
    gut.classList.add('overflow-hidden');

   //also tried it, without results
    main.removeEventListener('webkitTransitionEnd',listener);
    main.removeEventListener('otransitionend',listener);
    main.removeEventListener('oTransitionEnd',listener);
    main.removeEventListener('msTransitionEnd',listener);
    main.removeEventListener('transitionend',listener);

}

但是，不幸的是，似乎这些事件中没有一个不会在 JS 中触发。还有另一种方法可以做到这一点吗？我找到了其他指南，但他们再次使用这种方式来转换代码。

谢谢

4

1 回答 1

0

DOM 没有内置的one模拟。相反，您必须自己删除事件处理程序：

var main = document.getElementById('main');
var gut = document.getElementById('gut');
main.classList.add('slide-out');

main.addEventListener('webkitTransitionEnd',listener);
main.addEventListener('otransitionend',listener);
main.addEventListener('oTransitionEnd',listener);
main.addEventListener('msTransitionEnd',listener);
main.addEventListener('transitionend',listener);

var listener = function(){
    gut.classList.add('overflow-hidden');
    main.removeEventListener('webkitTransitionEnd',listener);
    main.removeEventListener('otransitionend',listener);
    main.removeEventListener('oTransitionEnd',listener);
    main.removeEventListener('msTransitionEnd',listener);
    main.removeEventListener('transitionend',listener);
}
于 2018-05-28T14:33:51.197 回答