animationend 事件也会在子元素的动画结束时触发？

Question

我有一个带有动画的 div。

我已经为这个 div 附加了一个 animationend 事件监听器。

这个 div 还有一个带有动画的子元素。

由于某种原因，当子元素的动画结束时，animationend 事件也会触发。

这是为什么？有没有办法解决这个问题？我希望仅在我将事件侦听器附加到的元素完成时才运行动画结束事件。

document.querySelector('.outer').addEventListener('animationend',function () {
  console.log('done')
})

body {
  height:100vh;
  display:grid;
  place-items:center;
}

.outer {
  display:grid;
  place-items:center;
  height:200px;
  width:200px;
  background:black;
  animation:spin 2s 
}

.inner {
  height:50px;
  width:50px;
  background:red;
    animation:spin 2s 2s 
}



@keyframes spin {
  from {
    transform:rotate(0)
  }
  to {
    transform:rotate(360deg)
  }
}

<div class="outer">
  <div class="inner">
    
  </div>
</div>

尝试使用 id 代替。还是没有运气

document.querySelector('#outer').addEventListener('animationend',function () {
  console.log('done')
})

body {
  height:100vh;
  display:grid;
  place-items:center;
}

#outer {
  display:grid;
  place-items:center;
  height:200px;
  width:200px;
  background:black;
  animation:spin 2s 
}

.inner {
  height:50px;
  width:50px;
  background:red;
    animation:spin 2s 2s 
}



@keyframes spin {
  from {
    transform:rotate(0)
  }
  to {
    transform:rotate(360deg)
  }
}

<div id="outer">
  <div class="inner">
    
  </div>
</div>

Answer 1

您可以检查事件的目标是否是侦听器附加到的元素。当子元素上的动画因为animationend 事件冒泡而结束时，也会调用事件处理程序。

document.querySelector('.outer').addEventListener('animationend', function(e) {
    if(e.target === this)  console.log('done')
})

document.querySelector('.outer').addEventListener('animationend',function (e) {
    if(e.target === this)  console.log('done')
})

body {
  height:100vh;
  display:grid;
  place-items:center;
}

.outer {
  display:grid;
  place-items:center;
  height:200px;
  width:200px;
  background:black;
  animation:spin 2s 
}

.inner {
  height:50px;
  width:50px;
  background:red;
    animation:spin 2s 2s 
}



@keyframes spin {
  from {
    transform:rotate(0)
  }
  to {
    transform:rotate(360deg)
  }
}

<div class="outer">
  <div class="inner">
    
  </div>
</div>