<!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. 查找->动态查找表->B+树(无代码)

    文字描述 B+树定义 B+树是应文件系统所需而出的一种B-树的变型树.一棵m阶的B+树和m阶的B-树的差异在于: (1)有n棵子树的结点中含有n个关键字 (2)所有的叶子结点中包含了全部关键字的信息, ...

  2. swift 桥接 Bridging 的创建和使用

    swift编程时,大概率会用到OC的文件,这时就要使用swift与oc的桥接文件.桥接文件以  XXXX-Bridging-header.h  这样子的文件名形式为标准,XXXX是你的项目名字. 具体 ...

  3. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  4. sublime phpfmt 的格式化

    php格式化有几种,这里只说phpfmt.这个插件只支持php7.0+,所以在安装php环境应该支持php7.0.至于低版本,在packagecontrol.io对应的插件页面也又提到. 在subli ...

  5. java定时任务的三种方式

    /**  * 普通thread  * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着,  * 通过sleep方法来达到定时任务的效果.这样可以快速简单的实现,代码如下 */  ...

  6. finecms在任意页面调用栏目名称和地址等

    finecms如何调用栏目名称和地址呢?在任意页面.我们有时需要在不同的页面调用某个栏目名,怎么调用比较快呢?ytkah整理了一些快速调用语句方便查找 栏目名称:{dr_cat_value(栏目id, ...

  7. Redis和Memcache的区别是什么

    Redis和Memcache都是内存数据库,但它们之间还是有区别的,跟着ytkah看看Redis和Memcache的区别吧 Redis 支持多种数据结构,如string,list,dict,set,z ...

  8. SQL SERVER 2016研究一

    一.安装SQL Server 2016 安装检查提示异常: 安装补丁: 根据系统判断补丁安装顺序,按顺序安装 Windows server 2012 R2 安装SQL补丁如下以及JDK: 安装完成 二 ...

  9. 014-通过JDB调试，通过HSDB来查看HotSpot VM的运行时数据

    一.JDB调试        在预发环境下进行debug时,时常因为工具和环境的限制,导致debug体验非常差,那么有什么方法能够简化我们进行debug的体验吗?JDB就是一种.        JDB ...

  10. 工具篇-Mac上搭建本地svn服务器以及使用Cornerstone进行本地版本控制

    1.在桌面上见一个文件夹命名为svn,然后打开终端: 创建一个mycode仓库:svnadmin create /Users/gaoyizhen736(自己的mac的用户名)/Desktop/svn/ ...