VUE实例课程---6、使用第三方类库实现动画
一、总结
一句话总结：
可以使用第三方类库实现动画，比如animate.css，可以分别给enter-active-class和leave-active-class设置类，可以:duration设置动画持续时间
<!-- :duration="毫秒值" 可以设置进入和离开时间--> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }" > <!-- 可以直接把animated写在需要设置动画效果的标签上，比如p --> <p v-if="show" class="animated">{{msg}}</p> </transition>
1、vue动画中设置animate.css动画 步骤？
a、将要设置动画的元素包裹在transition标签中，
b、可以分别给enter-active-class和leave-active-class设置动画类，例如：enter-active-class="bounceIn"
c、可以:duration设置动画持续时间，例如：duration="{ enter: 200, leave: 400 }"
<!-- :duration="毫秒值" 可以设置进入和离开时间--> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }" > <!-- 可以直接把animated写在需要设置动画效果的标签上，比如p --> <p v-if="show" class="animated">{{msg}}</p> </transition>
2、vue动画中设置animate.css动画持续时间？
:duration="毫秒值" 可以设置进入和离开持续时间
<!-- :duration="毫秒值" 可以设置进入和离开时间--> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }" > <!-- 可以直接把animated写在需要设置动画效果的标签上，比如p --> <p v-if="show" class="animated">{{msg}}</p> </transition>
二、使用第三方类库实现动画
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用第三方类库实现动画</title> 6 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <!-- 10 11 可以使用第三方类库实现动画，比如animate.css 12 13 --> 14 <div id="app"> 15 <button @click="show = !show"> 16 Toggle render 17 </button> 18 <!-- :duration="毫秒值" 可以设置进入和离开持续时间--> 19 <transition 20 enter-active-class="bounceIn" 21 leave-active-class="bounceOut" 22 :duration="{ enter: 200, leave: 400 }" 23 > 24 25 <!-- 可以直接把animated写在需要设置动画效果的标签上，比如p --> 26 <p v-if="show" class="animated">{{msg}}</p> 27 </transition> 28 </div> 29 <script src="../js/vue.js"></script> 30 31 <script> 32 let vm = new Vue({ 33 el: '#app', 34 data: { 35 show: true, 36 msg: '我有一只小毛驴，我永远也不骑' 37 } 38 }); 39 </script> 40 </body> 41 </html>
