<!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. Pycharm从虚拟环境切换到本地环境

    切换到本地: 点击左上角File – settings , 在打开的对话框中选择:Project xxx (xxx是你项目的名称) – Project Interpreter ,在右边可以看到解释器, ...

  2. Android开发 调试环境

    我们这里有3种调试方法,Unity Remote,Android Studio和第三方模拟器 准备工作 (1)Android Studio:安装Google USB Driver (2)手机安装Uni ...

  3. 实现文件上传功能（FileUpload组件）

    文件上传: 项目中经常用到文件上传. 自己实现文件上传,使用文件上传组件fileupload组件 1.指定表单类型为文件上传, enctype=”multipart/form-data” 2.提交方式 ...

  4. GPL，BSD，Apache三个开源协定的大体联系及区别

    开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别 以下是上述协议的简单介绍: BSD开源协议 BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以"为 ...

  5. 【JulyEdu-Python基础】第 2 课：关键字和循环控制

    大纲 变量和类型常见字符串处理条件判断循环控制函数 变量和类型 基本变量类型 对于python所有对象都是继承自object的类 容器: 整数 print(type(1234)) <class ...

  6. Linux 操作命令简

    一.Linux命令及获取帮助 1.Linux命令的格式1)了解Linux命令的语法格式:命令 [选项] [参数]2)掌握命令格式中命令.选项.参数的具体含义a)命令:告诉Linux(UNIX)操作系统 ...

  7. webdriervAPI(WebElement接口常用方法)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  8. selenium—显示等待中期望的场景语句

    ① alert_is_present() 判断页面是否出现alert框 wait = WebDriverWait(driver,10) alert = wait.until(EC.alert_is_p ...

  9. 使用PowerShell 自动安装VC++补丁

    执行环境:Windows Server 2012 R2 VC++下载链接 这里有个问题,虽说可以静默安装,但是未对当前系统检测是否已安装vc++补丁,望大佬指点 # author:lttr <w ...

  10. XXE漏洞简析

    0x00.什么是XXE? XML外部实体注入(XML External Entity Injection) XML基础 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型. ...