vue使用动画animate

vue使用动画animate

animate官网地址：https://animate.style/

（一）简介：

使用动画一般都是使用动画库吧，不然自己写吗？现在的库太多了，用的话很方便，但是确也一直限制住了自己，还是得自己去进去

（二）使用：

安装库

npm install animate.css --save

在main.js中引入使用

import animated from 'animate.css'
Vue.use(animated)

在页面文件上就可以通过class名称直接获取动画
在官网上可以直接通过复制获取class名称 进行动画展示

 <div class="animate__animated animate__bounceInLeft">
       
 </div>

（三）切换展示动画

在使用的时候一般动画都是要首次进入才会展示动画 ，但有时候我们需要进行手动触发一下，所以我们就显示隐藏一下。
这样就可以：

 this.showHide = false;
 setTimeout(() => {
    this.showHide = true;
 }, 100);

（四）滚动到指定位置展示动画

需要使用插件 但是我没有测试过

npm install wowjs --save-dev

<script>
import { WOW } from "wowjs"
import 'animate.css'
export default {
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.$nextTick(() => {
      new WOW({live: false}).init();
    });
  },
</script>