Question

我想让一个元素来制作“ fadeInDown”和“ fadeOut”动画

我单击一个按钮，然后使用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>

这是我的脚本：

 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事件处理程序。最好的方法是绑定到模板中的（可能是本机）事件，但是您可能需要添加一个反跳，因此即使浏览器定义了多个事件，您的函数也只能执行一次。

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

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

在旁注中，切勿使用this.toggled == true。如果您希望它是布尔值，请使用this.toggled。毕竟，如果它是真实的，那么它就是真实的。您无需进行任何比较。如果它可以是真实值，而您只想匹配true，请使用===来防止它匹配转换后的值。如果要将真值或假值转换为实际的真值或假值，只需执行!!variable。

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

1 个答案: