transitionend从内部子元素触发致元素提前隐藏的解决方案咨询

问题根源是transitionend事件会向上冒泡，.toggle的颜色过渡结束后触发的事件会传递到父元素.a，触发你绑定的隐藏逻辑，导致.a提前消失。以下是两种直接解决方式：

方法1：直接阻止.toggle的transitionend事件冒泡 #

给.toggle添加transitionend事件监听，阻止事件向上传递，这样父元素.a就不会收到内部元素的过渡结束事件：

// 新增阻止冒泡的代码
document.querySelector('.toggle').addEventListener('transitionend', function(e) {
  e.stopPropagation();
});

// 你的原有业务代码
var a = document.querySelector('.a')
a.style.display = 'block'
setTimeout(function() {
  a.classList.add('visible')
}, 50)

document.querySelector('.toggle').addEventListener('click', function() {
  console.log('click')
  a.addEventListener('transitionend', function cb(e) {
    console.log('end')
    a.style.display = 'none'
    // 用完移除监听，避免重复绑定
    a.removeEventListener('transitionend', cb);
  })
  a.classList.remove('visible')
})

方法2：在.a的监听中判断事件源 #

如果不想额外绑定事件，也可以在.a的transitionend回调里判断触发事件的元素是不是.a本身，只有父元素自己的过渡结束才执行隐藏：

var a = document.querySelector('.a')
a.style.display = 'block'
setTimeout(function() {
  a.classList.add('visible')
}, 50)

document.querySelector('.toggle').addEventListener('click', function() {
  console.log('click')
  a.addEventListener('transitionend', function cb(e) {
    // 只处理.a自身的过渡结束事件
    if (e.target !== a) return;
    console.log('end')
    a.style.display = 'none'
    a.removeEventListener('transitionend', cb);
  })
  a.classList.remove('visible')
})

这两种方式都不需要修改DOM结构，也不用依赖setTimeout，完全贴合CSS过渡的原生逻辑。

内容的提问来源于stack exchange，提问作者Toniq