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一样