• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

almost 3 years 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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

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

Andres GPT

Recommend me some offers
I have an error