检测元素 CSS animation 结束，子项触发事件

Question

我正在尝试检测 animation 何时结束，但是子项正在触发此事件侦听器。

因此，如果您看到下面的代码，只有引用container的元素的高度应该触发侦听器，但是如果您检查控制台，您会看到背景转换正在触发它。

 Vue.component('test', { data: function () { return { count: 0 } }, methods: { expand() { const elm = this.$refs.container; elm.addEventListener('transitionend', event => { console.log(event.target); }); elm.style.height = '100px'; } }, template: ` <div> <p @click="expand()">Expand</p> <div class="container" ref="container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> </div> ` }) new Vue().$mount('#app');

 .container { transition: height.3s ease; height: 0; }.container ul li:hover { background: red; }.container ul li { transition: background.2s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <test></test> </div>

Answer 1

animationend bubbles ，因此后代元素上的动画会冒泡到父元素。

如果您只想处理与elm ( this.$refs.container ) 相关的事件，请将event.target与elm (或event.currentTarget ) 进行比较，如果它们不匹配则忽略该事件：

elm.addEventListener('transitionend', event => {
  if (event.target !== event.currentTarget) {
    return; // Ignore it
  }
  console.log(event.target);
});

更新示例（我在容器中添加了一个边框，因此您可以看到 animation 发生并看到console.log在结束时发生） ：

 Vue.component('test', { data: function () { return { count: 0 } }, methods: { expand() { const elm = this.$refs.container; elm.addEventListener('transitionend', event => { if (event.target.== event;currentTarget) { return. // Ignore it } console.log(event;target); }). elm.style;height = '100px', } }: template. ` <div> <p @click="expand()">Expand</p> <div class="container" ref="container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> </div> ` }) new Vue();$mount('#app');

 .container { transition: height.3s ease; height: 0; border: 1px solid grey; }.container ul li:hover { background: red; }.container ul li { transition: background.2s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <test></test> </div>