在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)就不要弄動畫了