javascript 转换结束从内部子级激发

von4xj4u 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(80)

这是最小的可复制的例子。"切换"悬停的过渡结束是发射（我不想）和隐藏"a"过早。
要重现，请在过渡结束后单击切换。
我意识到发生这种情况是因为toggle在一个内部（我不能改变它）。有没有办法在toggle上停止transitionend（不检测发生了哪个转换）。
它变得太复杂了，发现过渡结束的bug，我宁愿使用setTimeout（这对css过渡来说有点荒谬）。

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.classList.remove('visible')

})

.a {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  left: 200px;
  display: none;
  transition: left 1s;
}

.visible {
  left: 0;
}

.toggle {
  transition: color 0.2s;
}

.toggle:hover {
  color: #fff;
}

<div class="a">
  <div class="toggle">
    toggle
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75642579/transitionend-fires-from-inner-child

2条答案

按热度按时间

vwoqyblh1#

使用关键帧动画根本不需要JavaScript，只需指定结束状态，并确保将填充模式设置为forwards，这样结束状态就不会重置。

.a {
  display: grid;
  font: 2rem sans-serif;
  place-content: center;
  
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  
  left: 200px;
  opacity: 0;
  animation: slideIn .3s ease-in-out forwards;
}

.toggle {
  transition: color 0.2s;
}

.toggle:hover {
  color: #fff;
}

@keyframes slideIn {  
  to {
    opacity: 1;
    left: 0;
  }
}

<div class="a">
  <div class="toggle">
    toggle
  </div>
</div>

赞(0）回复(0）举报 2023-03-06

dhxwm5r42#

您可以在toggle元素上检测到过渡结束，并阻止它向上传播到a元素。

var a = document.querySelector('.a')
let t = document.querySelector('.toggle');
t.addEventListener('transitionend', function() {
  event.stopPropagation();
});
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.classList.remove('visible')

})

.a {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  left: 200px;
  display: none;
  transition: left 1s;
}

.visible {
  left: 0;
}

.toggle {
  transition: color 0.2s;
}

.toggle:hover {
  color: #fff;
}

<div class="a">
  <div class="toggle">
    toggle
  </div>
</div>

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 转换结束从内部子级激发

2条答案

相关问题

热门标签

最新问答