簡介

wow.js

image.png

animate.css

官網(wǎng)地址：https://animate.style/
animate.css 是一個(gè)來自國外的 CSS3 動(dòng)畫庫，它預(yù)設(shè)了抖動(dòng)（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達(dá) 60 多種動(dòng)畫效果，幾乎包含了所有常見的動(dòng)畫效果。

效果

先來個(gè)效果，下面內(nèi)容還沒寫完

效果.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 = {
      //默認(rèn)為true
      live: false
    };
    new WOW(options).init();
  }
};
</script>

然后直接在需要的地方添加 wow animate__animated 和需要的animate.css的動(dòng)畫類就行了，具體動(dòng)畫名看文檔：https://animate.style/
可選屬性：

1. data-wow-duration 代表的執(zhí)行動(dòng)畫的時(shí)間長短
2. data-wow-delay 代表延遲多久執(zhí)行該動(dòng)畫
3. data-wow-offset：啟動(dòng)動(dòng)畫的距離（與瀏覽器底部有關(guān)）
4. data-wow-iteration：動(dòng)畫的次數(shù)重復(fù)

注意：

添加class類的標(biāo)簽只能是塊級(jí)標(biāo)簽，比如div,header,footer,p,section等，像span之類的行內(nèi)標(biāo)簽必須增加display:inline-block，轉(zhuǎn)換成塊之后才能生效。

順便給個(gè)完整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