直播軟體原始碼，實現頁面滾動到可視區顯示動畫效果

直播軟體原始碼，實現頁面滾動到可視區顯示動畫效果

第一步先安裝animate.css

- link引入方式，用的cdn

 
 <link href="

-第二種npm：

npm install animate.css ;

 

//在main.js引入

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

注意！！！！！！！！！！！！！！！！

vue版本相容性問題導致會動畫不起作用！預設會安裝4版本的

處理辦法，安裝對應低版本的動畫外掛：

npm install animate.css@3.5.1 --save

第二部引入wowjs：

我是在元件中引入的WOW，當然你也可以在全域性，全域性引入記得掛載到vue原型上即可

import { WOW } from "wowjs";
 
  mounted() {
    //第一種寫法，可以設定wow中屬性
    this.$nextTick(() => {
      // 在dom渲染完後,再執行動畫
      var wow = new WOW({
        boxClass: "wow", ///動畫元件css類（預設為wow）
        animateClass: "animated", //動畫css類（預設為animated）
        offset: 0, //到元素距離觸發動畫（當預設為0）
        mobile: true, //在移動裝置上觸發動畫（預設為true）
        live: true, //對非同步載入的內容進行操作（預設為true）
      });
      wow.init();
    });
    //第二種寫法，預設屬性
    // this.$nextTick(() => { // 在dom渲染完後,再執行動畫
    // new WOW().init();
    //})
  },

 以上就是 直播軟體原始碼，實現頁面滾動到可視區顯示動畫效果，更多內容歡迎關注之後的文章