微信扫一扫打赏支持

VUE实例课程---6、使用第三方类库实现动画

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>

 

 

 

 

 

 
posted @ 2020-04-23 04:59  范仁义  阅读(194)  评论(0)    收藏  举报