Detect element CSS animation end, child items firing the event-CodePudding

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 
      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>

CodePudding user response：

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 
      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>