简介

wow.js

image.png

animate.css

官网地址：https://animate.style/
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

效果

先来个效果，下面内容还没写完

效果.gif

在vue-cli中使用

安装animate

npm install animate.css --save

安装wow.js

npm install wowjs

引入animate

在main.js中全局配置animate.css：

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

引入wowjs

在需要的组件引入wowjs
例如我在views/home.vue使用

//home.vue
<script>
import { WOW } from "wowjs";
export default {
  name: "Home",
  components: {

  },
  mounted() {
    var options = {
      //默认为true
      live: false
    };
    new WOW(options).init();
  }
};
</script>

然后直接在需要的地方添加 wow animate__animated 和需要的animate.css的动画类就行了，具体动画名看文档：https://animate.style/
可选属性：

1. data-wow-duration 代表的执行动画的时间长短
2. data-wow-delay 代表延迟多久执行该动画
3. data-wow-offset：启动动画的距离（与浏览器底部有关）
4. data-wow-iteration：动画的次数重复

注意：

添加class类的标签只能是块级标签，比如div,header,footer,p,section等，像span之类的行内标签必须增加display:inline-block，转换成块之后才能生效。

顺便给个完整home.vue的html部分代码

  <div class="home">
    <!-- 封面 -->
    <el-row class="home_main">
      <div class="tobe wow animate__animated animate__bounceInLeft" data-wow-duration="2s">
        <img src="../assets/tobe.png" alt srcset />
      </div>
      <div class="circle_box"></div>
      <div
        class="shen wow animate__animated animate__bounceInLeft"
        data-wow-delay="2s"
        data-wow-duration="2s"
      >
        <img src="../assets/shenlue.png" alt srcset />
      </div>
      <div
        class="right_logo wow animate__animated animate__bounceInRight"
        data-wow-delay="0.5s"
        data-wow-duration="1s"
      >
        <img src="../assets/右logo.png" alt srcset />
      </div>
      <div
        class="hiro_pic wow animate__animated animate__bounceInDown"
        data-wow-delay="1.5s"
        data-wow-duration="2s"
      >
        <img src="../assets/cark.png" alt srcset />
      </div>
    </el-row>
    <!-- 第一块 -->
    <el-row class="home_tran">
      <el-row class="home_tran_title">xxx</el-row>
    </el-row>
  </div>

参考

https://blog.csdn.net/Taurus_0811/article/details/100694110