• 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>

     
  • 相关阅读:
    WHERE col1=val1 AND col2=val2;index exists on col1 and col2, the appropriate rows can be fetched directly
    MySQL 交集 实现方法
    MBProgressHUD的使用
    Xcode4 使用 Organizer 分析 Crash logs(转)
    SimpleXML 使用详细例子
    PHP的XML Parser(转)
    iPhone,iPhone4,iPad程序启动画面的总结 (转)
    Pop3得到的Email 信件格式介绍
    yii总结
    隐藏Tabbar的一些方法
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12758246.html
Copyright © 2020-2023  润新知