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

Question

我试图检测动画何时结束，但子项正在触发此事件侦听器。

因此，如果您看到下面的代码，则只有引用为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气泡，因此子元素上的动画气泡一直到父元素。

如果只想处理与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);
});

更新的示例(我在容器中添加了一个边框，这样您就可以看到动画的发生，并看到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>