Question

我试图将这段代码从DOM转换为标准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中触发。还有另一种方法吗？我找到了其他指南，但他们再次使用这种方式转换代码。

由于

Answer 1

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);
}

转换jquery .one（）函数不要在vanilla JS中触发

1 个答案: