Javascript jquery.one（）函数don'；香草JS中的t触发器

我正在尝试将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中触发。 还有别的办法吗？我已经找到了其他的指南，但是他们再次使用这种方式来转换代码

---

谢谢

DOM没有内置的

模拟。相反，您必须自己删除事件处理程序：

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

“…在vanilla JS中…”=>“…直接使用DOM…”这两种情况下的语言都是相同的，在一种情况下或另一种情况下都不再是vanilla。我在上面的代码中没有看到任何试图在第一次调用处理程序时删除它的内容，这就是jQuery的
one
所做的…？或者对于这个简单的用例，只需检查该类是否已经存在。请使用一个演示问题的示例更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮；）运行的问题。另外，请确定你的问题是关于什么的。它是关于用DOM做
one
？或关于
transitionend
。或者…？更新了我添加的问题，也将removeEventListener添加到每个元素中，但它不起作用，似乎事件不起作用trigger@ste9206-这与你问的关于
one
的问题完全不同。你看过关于过渡结束事件的几个问题了吗？是的，我看过很多次了，解决方案的主要部分在上面报告了你的答案。。