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

Question

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

我点击一个按钮，用v-show判断是否让它显示

问题是这个动画在第一次运行时效果很好，

但是第二次这个元素会fadeInDown一段时间然后自动消失（可能是fadeOut）

这是我的 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'
    });
  }
}
}

不知道是不是我的toggler方法搞错了，请帮我解决一下

非常感谢！

Answer 1

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

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

如果做不到，您需要手动添加和删除。您在 mounted 生命周期挂钩中添加单个事件处理程序，并在 beforeDestroy 生命周期挂钩中删除相同的处理程序。如果您不这样做，您可能会引入内存泄漏。然后，此处理程序将根据您的 toggled 变量执行代码。

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

在旁注中，永远不要使用 this.toggled == true。如果您希望它是布尔值，请使用 this.toggled。毕竟，如果这是真的，那就是真的。你不需要和任何东西比较。如果它可以是真值，而你只想匹配真值，请使用 === 来防止它匹配转换后的值。如果您想将真值或假值转换为实际的真值或假值，您可以简单地执行 !!variable.

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

Manually repeating animateCss fails in Vue-cli

javascript

vue.js

animate.css

vue-cli