zoukankan      html  css  js  c++  java
  • 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>

     
  • 相关阅读:
    Ubuntu 16.04出现:Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/cache/app-info -a -e /usr/bin/appstreamcli; then appstreamcli refresh > /dev/null; fi'
    Apache Shiro教程
    Ubuntu 16.04安装磁盘占用分析器:ncdu
    Mac 10.12为打开终端增加快捷键(转)
    Mac下的裁剪快捷键
    Ubuntu 16.04安装WebStorm
    Ubuntu 16.04出现:"Failed to start /etc/rc.local Compatibility"的问题解决思路
    Ubuntu 16.04安装ntopng流量监控软件
    浅谈命令查询职责分离(CQRS)模式
    GC是如何回收SoftReference对象的
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12758246.html
Copyright © 2011-2022 走看看