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

     <script src="./lib/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

 </head>

 <body>

     <div id="app">

         <input type="button" value="toggle" @click="flag=!flag">

         <!-- duration属性规定动画进入和离开所花费的时间 -->

         <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="400">

             <h3 v-if="flag">这是一个H3</h3>

         </transition> -->

         <!-- 分开绑定时间 -->

         <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter:200,leave:400 }">

             <h3 v-if="flag">这是一个H3</h3>

         </transition>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 flag: false,

             },

             methods: {

             },

         })

     </script>

 </body>

 </html>

Vue系列之 => 使用第三方animated.css动画的更多相关文章

  1. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  2. Vue系列之 => 模拟购物车添加小球动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. webpack4对第三方库css，项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  4. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  5. Vue的css动画原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  7. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  8. Vue（十四）过渡（动画）

    过渡(动画) 1. 简介 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 本质上还是使用CSS3动画:transition.animation 2. 基本用法 使用trans ...

  9. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

随机推荐

  1. dhttp与IdCookieManager处理登陆过程

    dhttp与IdCookieManager处理登陆过程 我们知道,用IE注册网页(象论坛)时,它能够自动找出相应的Cookie并提交给服务器,从而使用户不用重新登录就能够看到与他自己帐号有关的内容.这 ...

  2. delphi inttohex 整型到十六进制

    inttohex from delphi help: Returns the hex representation of an integer. Unit SysUtils Category nume ...

  3. XE 画矩形实现拖拉改变大小（属性）

    实现原理: 1.拖一个rectangle控件,Align属性为TOP 2.拖一个Split控件,Align为Top 3.拖Rectangle,Align为Bottom 4.拖Split,Align为B ...

  4. 第 6 章 es5 对象创建和继承

    目录 第 6 章 Object 一.创建对象 1. 字面量 2. 工厂模式 3. 构造函数 4. 原型 5. 构造+原型 6. 其他 二.Object静态属性 Object.definePropert ...

  5. 第二章 深入C#数据类型

    深入C#数据类型       巧记:值(无ref)+值=不变 值(无ref)+引=变     引(有ref)+值/引=变     1.值类型和引用类型 1.引用类型 源于system.object家族 ...

  6. MySQL数据库改名的三种方法

    前不久去面试,被问到Innodb引擎的表如何改数据库名,当时我也只回答了MyISAM改如何操作,被一些细节问题打败,真是操蛋. 如果表示MyISAM那么可以直接去到数据库目录mv就可以. Innodb ...

  7. （4.21）sql server中复制查询结果集

    在查询结果窗口中复制列标题似乎是一项简单的任务,但对于业余爱好者来说,这可能是一场噩梦. 没有可见的指令/链接/按钮,其中一个可以使用列标题单击和复制所选数据.让我们看看如何在SQL Server M ...

  8. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  9. ORACLE-osi分层模型.md

    一. 标准化组织ISOISO:国际标准化组织   ( International Organization for Standardization )OSI:开放系统互联   ( open syste ...

  10. Redis入门到高可用（十二）—— pipeline

    一.回忆通信模型 二.流水线 1.什么是流水线 2.pipeline-Jedis实现 3.与原生M(mget,mset等)操作对比 M操作是原子操作 pipeline命令是非原子的,Redis服务器会 ...