<!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. 《linux 字符处理》- grep/sort/uniq/tr/paste

    一:基本 字符处理主要是文本的搜索和处理. 搜索也主要使用到了 管道 作为媒介. 二: grep 搜索文本 基本语法 * grep [-incv] ’文本’ 文件 * i 不区分大小写 * c 匹配行 ...

  2. 主动触发input框的失去焦点事件，阻止输入法跳出

    今天遇到个问题,我在手机做一个选择生日的功能,但是当我点击input框时,事件选择插件和输入法都弹出来了,很丑,然后就想阻止输入法弹出来, 网上一个方法是:在input框的获取焦点事件里,主动触发失去 ...

  3. Python文件操作---正斜杠与反斜杠

    Python中的正斜杠与反斜杠 首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Wi ...

  4. sqlite数据导入mysql

    sqlite导出数据 1.首先将sqlite数据库中的数据库格式由db或者db3等转为.sql格式,方法如下: 首先是不修改路径的情况下,在命令行下(方法一): sqlite3 database_na ...

  5. 两个java工程之间的相互调用方法

    如果你有两个java项目的话,如何向他们之间进行信息的通信前提:必须知道要通信的java项目(接收请求方)的服务器的IP地址和访问路径.其实两个java项目之间的通信还是使用HTTP的请求.主要有两种 ...

  6. ubuntu上安装ftp

    为什么要安装ftp?为了方便在主机和虚拟机之间传文件 一般有两种做法: 一.使用VMware安装虚拟机后,可以直接继续安装VMware tools,就可以将主机上的文件拖到ubuntu虚拟机的某个目录 ...

  7. 前端 chrome查看html样式基本操作

    Chrome浏览器是世界上HTML5支持最好的浏览器.提供了非常好的开发工具,非常适合我们开发人员使用.审查元素功能的快捷键是F12. 按检查或者F12 鼠标点击找标签 chorme审查元素的使用 - ...

  8. MYSQL PROCEDURE 测试用例

    /** * 查询俱协信息 */ DROP PROCEDURE IF EXISTS `get_club_list`; DELIMITER $$ CREATE PROCEDURE `get_club_li ...

  9. 118A

    #include <iostream> #include <cctype> #include <string> using namespace std; int m ...

  10. asp.net几个重要对象

    DataSet是用来做连接sql的一种方法,意思是把数据库的副本存在应用程序里,应用程序开始运行时,把数据库相关数据保存到DataSet.DataTable表示内存中数据的一个表.常和DefaultV ...