时间戳

首页 > 解决方案 > 在 Vue-cli 中手动重复 animateCss 失败

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

问题描述

我想让一个元素做“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'
    });
  }
}
}

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

非常感谢！

标签： javascriptvue.jsanimate.cssvue-cli

解决方案

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

你需要做的是有一个单一的动画结束事件处理程序。最好的方法是绑定到模板中的（可能是本机的）事件，但您可能需要添加去抖动功能，以便您的函数只执行一次，即使浏览器定义了多个事件。

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

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

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

推荐阅读