<!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. Python列表排序

    1.冒泡排序 冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交换,也就 ...

  2. DESC加密解密算法

    using System; using System.Text; using System.Windows.Forms; using System.Security.Cryptography; usi ...

  3. beego 如何自定error

    beego通过Redirect方法来进行跳转: 1 2 3 func (this *AddController) Get() {     this.Redirect("/", 30 ...

  4. Pytorch修改ResNet模型全连接层进行直接训练

    之前在用预训练的ResNet的模型进行迁移训练时,是固定除最后一层的前面层权重,然后把全连接层输出改为自己需要的数目,进行最后一层的训练,那么现在假如想要只是把 最后一层的输出改一下,不需要加载前面层 ...

  5. logistics二分类

    binaryclassification #DATASET: https://archive.ics.uci.edu/ml/datasets/Glass+Identificationimport nu ...

  6. 前端 api 请求缓存方案

    参考链接:https://blog.csdn.net/zhuoganliwanjin/article/details/89598753#commentBox

  7. Django2.2 连接mySQL数据库

    一.Django2.2连接数据库(踩雷) 首先,Django2.2自带的是sqlite3数据库,但我们学的是mysql,因此学着连接(在mysql环境搭建成功的情况下)---参考博客: https:/ ...

  8. poj2385（基础DP）

    题目链接:http://poj.org/problem?id=2385 题意:最开始Bessie站在树1下面,每一个单位时间有颗苹果从树1或者树2上落下来.每个单位时间Bessie可以移动一次位置,时 ...

  9. 使用CompletableFuture进行异步任务编排

    1.JDK5引入了Future进行异步任务的处理,Future 的接口主要方法有以下几个: (1)boolean cancel (boolean mayInterruptIfRunning) 取消任务 ...

  10. 从零开始，SpreadJS新人学习笔记【第3周】

    表单&函数 阔别多日, SpreadJS新人学习笔记,本周起正式回归!(在断更的这一个月中,我为大家先后录制了14期SpreadJS产品入门系列学习视频,希望帮助那些正在学习和使用 Sprea ...