<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

     <!-- 入场 bounceIn    离场bounceOut -->

   </head>

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

 </html>

第五章 动画 44：动画-使用第三方animate.css类库实现动画的更多相关文章

  1. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  2. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  3. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  4. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  5. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  6. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  7. 【动画消消乐 】HTML+CSS 吃豆豆动画 073

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  8. Ionic3学习笔记（五）动画之使用 animate.css

    本文为原创文章,转载请标明出处 目录 前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...

  9. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

随机推荐

  1. VS 特殊注释

    任务注释(添加此注释后,点击视图->任务列表,可以看到TODO注释的位置)://TODO: (未实现)……//UNDONE:(没有做完)……//HACK:(修改)……

  2. Blender建模与游戏换装（转载文）

    本文转载自https://my.oschina.net/huliqing/blog/880113?hmsr=toutiao.io 如果本文涉及侵权行为,请原作者联系博主邮箱,我将及时进行删除处理 博主 ...

  3. 【AMAD】coconut -- 简单，优雅，pythonic的函数式编程语言

    动机 简介 个人评分 动机 作者的话: 我喜欢函数式编程,我认为函数式编程提供了一个更自然的方式来思考问题,并且代码也更加优雅,易读.不过如果你看过前20个最受欢迎的编程语言,你会发现没有一个式函数式 ...

  4. virtualenv以及virtualenvwrapper的安装和使用

    Virtualenv 安装 安装前最好保证pip为最新版本: python -m pip install -U pippip install virtualenv 创建新的环境 virtualenv ...

  5. 解析之IIS解析

  6. jmeter性能测试总结

    一.性能测试问题记录: Ⅰ.秒杀的失败率了在96.45%,原因 Query对于 活动的秒杀采用的是0.5秒,刷新缓存的策略在活动中优惠券被秒杀一空 下架前,短暂的时间内仍能够查询到 这个活动架构中采用 ...

  7. [转帖]Java 8新特性探究 前言

    Java 8新特性探究 前言 https://my.oschina.net/benhaile/blog/174136 讲下java的历史 感觉挺好的. 评论 17 jdk8java8javase新特性 ...

  8. ABC143F Distinct Numbers

    这道题非常好.其思想类似于 $O(n \log n)$ 求最长上升子序列的算法. hint:考虑固定操作次数 $o$,$k$ 最大可取到多少? int n; scan(n); vi a(n); sca ...

  9. 第一次把mysql装进docker里碰到的各种问题

    最近电脑经常关机要关好长时间,老是需要长按电源键强行关机.也不知道是怎么回事. 后来查看关机时的日志,发现是mysql停不掉.这可闹心了!怎么办?上网搜了搜也没有找到什么好的解决办法.总不能每次关机都 ...

  10. php运行结果设置无缓存

    修改配置php.ini vim /usr/local/php/lib/php.ini opcache.enable= 重启php服务 service php-fpm restart done! 参考地 ...