解决vue中使用wow.js点击不显示的问题

这里上半部分是13种不同的点击显示动画，可是页面刷新后续点击并未如期而至
原因：wowjs的动画或自定义的动画默认只显示1次，在页面刷新便会触发，所以后续没有刷新的地方是不会触发的
解决方法：
* 第一种：在外层套一层div，div根据点击事件v-if 为true或false
* 第二种：使用动态class，根据点击事件实时将动画class加上
解决原理：手动刷新需要加载动画的部分，让其动画在初始化时展示

自定义动画示例

//自定义动画
@keyframes fadeInLeftDH {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInDH {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInRightDH {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeIn {
  animation: fadeInDH ease-out 0.6s;
}
.fadeInLeft {
  animation: fadeInLeftDH ease-out 0.6s;
}
.fadeInRight {
  animation: fadeInRightDH ease-out 0.6s infinite;
}
@keyframes filterBlur {
  from {
    filter: blur(5px);
  }
  to {
    filter: blur(0);
  }
}
.filter-blur {
  animation: filterBlur 1s;
}