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

Question

i'm trying to detect when an animation ends however the child items are triggering this event listener.

So if you see the code below only the height on the element with the reference of container should trigger the listener, however if you check the console you will see that the background transition is firing this instead.

 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 , so animations on descendant elements bubble up to the parent.

If you only want to handle the event when it relates specifically to elm ( this.$refs.container ), compare event.target to elm (or event.currentTarget ) and ignore the event if they don't match:

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

Updated Example (I've added a border to the container so you can see the animation occur and see that the console.log happens when it ends) :

 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>