vue第三方庫animate.css實現動畫

本文轉載自查看原文 2019-11-15 09:23 291 vue

一、解釋

參考樣式地址https://daneden.github.io/animate.css/

1、入場：enter-active-class

　　離場：leave-active-class

2、animated：必須使用，不使用就沒有效果

3、使用 :duration="毫秒值" 來統一設置入場和離場時候的動畫時長

4、使用 :duration="{ enter: 200, leave: 400 }" 來分別設置入場的時長和離場的時長

二、代碼

 <link rel="stylesheet" href="./lib/animate.css">
  <!-- 入場 bounceIn    離場 bounceOut -->

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">這是一個H3</h3>
    </transition>

    <!-- 使用 :duration="毫秒值" 來統一設置 入場 和 離場 時候的動畫時長 -->
    <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition>

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分別設置 入場的時長 和 離場的時長  -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> 
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 animate.css（第三方動畫使用方法） vue 集成 animate.css 動畫庫 CSS動畫庫——animate.css的使用 CSS3動畫庫——animate.css 如何使用動畫庫animate.css 動畫庫animate.css的用法使用 Animate.css 實現轉場動畫 Vue 用第三方的庫去實現動畫效果 vue+ webpack中的animate.css實現的執行多個連續的動畫 vue animate.css訓練動畫案例列表循環