animate動畫庫的使用

在vue中便捷使用animate動畫庫效果。

安裝animate動畫庫

npm install animate.css --save

在vue跟目錄中 main.js 導入animate動畫庫

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

使用一

直接在css中引入動畫

缺點： 在頁面一加載完畢動畫同時也執行完畢，要是在頁面可視區域外，動畫就不能被用戶看到

<div class="animate__animated  animate__backInLeft" >
   第一個 animate__animated  為固定的類名 必須要加
   第二個 animate__backInLeft  在動畫庫中 選擇的效果 
</div>

可在官網選擇所需的動畫樣式名字，官網地址：https://animate.style/

使用二

優點：該方法是頁面滑動到標簽位置，標簽顯示，立馬執行該動畫。

在vue跟目錄中 main.js 中自定義指令

注：該事件是在大佬的博客發現，要是各位發現原址，歡迎評論留言

// 頁面滑動到元素執行改動畫
Vue.directive('class', {
  inserted: function (el, binding) {
    // 聚焦元素
    binding.addClass = () => {
      const { top } = el.getBoundingClientRect()
      const h = document.documentElement.clientHeight || document.body.clientHeight
      // console.log('屏幕', top, '可', h)
      if (top < h) {
        el.className = binding.value
        if (binding.addClass) {
          window.removeEventListener('scroll', binding.addClass)
        }
      }
    }
    window.addEventListener('scroll', binding.addClass)
    binding.addClass()
  },
  unbind: function (el, binding) {
    if (binding.addClass) {
      window.removeEventListener('scroll', binding.addClass)
      console.log('取消事件綁定')
    }
  }
})

缺點： 在使用該事件需要嵌套一層div,用來放該動畫事件

<div v-class="'animate__animated animate__fadeInUp'">
  <div>
        動畫內容 建議在外面包一層div 防止影響到頁面css
  </div>
</div>

uni-app（H5）擴展

保存該css: https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

保存至static文件下

在app引入css

<style>
    /*每個頁面公共css */
    @import "static/css/animate.css";
</style>

使用方法與vue一樣