• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

56
Views
Detect element CSS animation end, child items firing the event

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>

about 2 months ago ·

Juan Pablo Isaza

1 answers
Answer question

0

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>

about 2 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.