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

我想让一个元素做“淡入淡出”和“淡出”动画

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

问题是这部动画在第一时间效果很好

但在第二次时，该元素将消失一段时间，然后自动消失（可能消失）

这是我的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>

我想知道我是否在切换方法上出错了，请帮我解决这个问题

---

非常感谢

您的缩进有点乱，但我相信

addEventListener

调用在

toggler

函数中。这是一个问题，因为每次单击时都要添加事件处理程序。如果将要添加的函数记录到日志中，您会注意到在动画结束时调用了多个函数

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

如果不能这样做，则需要手动添加和删除。您可以在

挂载的

生命周期挂钩中添加单个事件处理程序，并在

beforeDestroy

生命周期挂钩中删除相同的处理程序。如果不这样做，可能会导致内存泄漏。然后，该处理程序将根据您的

切换的
变量执行代码


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


在旁注中，切勿使用
this.toggled==true
。如果希望它是布尔值，请使用
this.toggled
。毕竟，如果这是真的，那么它就是真的。你不需要和任何东西相比。如果它可以是truthy值，并且您只希望匹配true，请使用
==
防止它匹配转换后的值。如果您想将真值或假值转换为实际真值或假值，只需执行
！！变量
使用computed属性完全解决了这个问题，感谢您提醒我使用布尔值，谢谢！
 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'
    });
  }
}
}