在Vue-cli中手动重复animateCss失败

Question

我想让一个元素做"fadeInDown"one_answers"fadeOut"动画

我点击一个按钮并使用v-show来确定是否让它显示

问题是这个动画在第一时间运行良好，

但在第二次时，元素将衰减Indown一段时间，然后自动消失(可能衰减Out(

这是我的html:

<v-btn @click="toggler"><i class="material-icons">dehaze</i></v-btn>
<v-layout 
:class="wallpaperClass"
v-show="toggled" 
id="wallpaper" 
align-center justify-center row fill-height>
<router-link tag="v-btn" class="blue" to="/">somewhere</router-link> 
<router-link tag="v-btn" class="blue" to="/">somewhere</router-link> 
<router-link tag="v-btn" class="blue" to="/">somewhere</router-link> 
<router-link tag="v-btn" class="blue" to="/">somewhere</router-link> 
<v-btn @click="toggler"><i class="material-icons">close</i  ></v-btn>
</v-layout>

这是我的脚本：

data: () =>({
toggled : false,
wallpaperClass: 'animated fadeInDown'
}),
methods: {
toggler() {
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
if(this.toggled == true) {
this.wallpaperClass = 'animated fadeOut'
document.getElementById("wallpaper").addEventListener(animationEnd,()=>{
this.toggled = false
});
} else {
this.toggled = true
document.getElementById("wallpaper").addEventListener(animationEnd,()=>{
this.wallpaperClass = 'animated fadeInDown'
});
}
}
} 

我想知道我是否在切换方法中出错了，请帮我解决

非常感谢！

Answer 1

您的缩进有点乱，但我相信addEventListener调用在toggler函数中。这是一个问题，因为每次单击都要添加事件处理程序。如果您要记录正在添加的函数，您会注意到在动画结束时调用了多个函数。

您需要做的是拥有一个单独的animationend事件处理程序。最好的方法是绑定到模板中的(可能是本机(事件，但您可能需要添加一个debounce，这样您的函数只执行一次，即使浏览器定义了多个事件。

如果无法做到这一点，则需要手动添加和删除。在mounted生命周期挂钩中添加一个事件处理程序，并在beforeDestroy生命周期挂钩删除相同的处理程序。如果不这样做，可能会导致内存泄漏。然后，该处理程序将执行基于toggled变量的代码。

---

进一步的优化包括基于切换类设置动画类。换句话说，您将根据this.toggled的值创建一个计算属性wallpaperClass，它是'animated fadeOut'或'animated fadeInDown'。然后，您只需更改toggled变量即可使动画自动工作。

---

请注意，切勿使用this.toggled == true。如果希望它是布尔值，请使用this.toggled。毕竟，如果它是真的，那么它就是真的。你不需要与任何东西相比。如果它可以是truthy值，并且您只想匹配true，请使用===来阻止它匹配转换后的值。如果您想将truthy或falsy值转换为实际的true或false值，只需执行!!variable即可。