我有一个带动画的div。
我已将animationend事件侦听器附加到此分区。
这个div还有一个子元素和一个动画。
出于某种原因，当childelement的动画也完成时，animationend事件将激发。
为什么会这样？有没有办法绕过这个问题？我希望animationend事件仅在我附加eventlistener的元素完成时运行。

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>