在vue中使用animate.css动画库(V4最新版)

在vue中使用animate.css动画库

npm安装以及使用(4.1.0版本)

1. npm安装npm install animate.css --save

   // in main.js
   import animated from 'animate.css' 
   Vue.use(animated)
   

2. 使用cdn引入https://www.bootcdn.cn/animate.css/

   // in index.html 
   <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">
   

3. 在html标签中使用动画

   <h1 class="animate__animated animate__bounce">An animated element</h1>

4. 使用transition组件配合动画

   1. 具体参考https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡的类名

   2. 使用该组件可以在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

      <transition enter-active-class="animate__animated animate__pulse">
          <div v-show="show">
              <p>hello</p>
              <h1>h1111</h1>
          </div>
      </transition>
      <transition leave-active-class="animate__animated animate__shakeX">
          <div v-show="show">
              <p>byebye</p>
              <h1>x轴抖动</h1>
          </div>
      </transition>
      <input
             class="animate__animated"
             :class="{'animate__shakeX':shake}"
             ref="input"
             />
      
      

      // 让上面的input框动起来
      this.shake = true
      setTimeout(() => {
          // 取消晃动样式
          this.shake = false
      }, 800)
      

   3. 官网关于transitions这块内容太多了 看不过来先不看了...

5. 使用自定义属性来定义动画的持续时间

   1. https://animate.style/#utilities
   2. 当然animate.css也自带了一些类简化使用
   3. 包括1秒-5秒,慢,更慢,快,更快,默认是1000ms
   4. 也可以加入:duration来统一设置入场和离场时候的时长 单位毫秒
   5. 自定义属性用到或者有空在总结

6. 使用animate__repeat-1来定义动画效果的重复次数 (1,2,3,infinite)

注意事项

1. animate.min.css大概有70kb,正常的大概有将近100kb
2. 不要在对行内元素使用dispplay:inline需要的话你可以设置该元素为行内块元素display: inline-block
3. Animate.css v4的升级带来了破坏性的影响(这样翻译怪),所有类要加前缀animate__

Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is not possible.

But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

3. 别像一些人的博客搞得那么花里胡哨的,动画要有意义,把用户的目光吸引到特殊的内容上!
4. 大块大块的元素就尽量不要使用,可能会很混乱,根元素(html,body)就不要弄动画了