<!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. teamviewer 卸载干净

    1 点击开始菜单,控制面板,卸载程序,找到软直接卸载2 按住Ctrl+R,输入%AppData%,删除teamview 相关文件夹3 输入regedit打开注册表HKEY_LOCAL_MACHINE\ ...

  2. 《linux 文件目录》- touch/rm/mv/cat/head/tail/cp/mkdir/chmod/chown/find/locate/which/whereis

    一:基本 / 根目录下目录结构定义 /bin 常见的用户指令 ls/echo ...... 等 /boot 内核和启动文件 /dev 设备文件 /etc 系统和服务配置文件 /home 用户家目录 / ...

  3. elasticsearch 出现“java.lang.OutOfMemoryError: Java heap space”

    默认情况下,Elasticsearch JVM默认使用最小和最大大小为2 GB的堆.迁移到生产环境时,配置堆大小以确保Elasticsearch堆足够的大很重要的. Elasticsearch将通过X ...

  4. linux常用查看文件或日志命令

    常见查看文件内容命令汇总如下: cat     filename           查看日志,会打开整个文件,直接跑到最后面 tac     filename           查看日志,会打开整 ...

  5. Java+Selenium 如何处理Try/Catch

    场景:为了检查数据是否存在,如果存在就把数据删除,不存在则新增保存.因为我们需要做下数据初始化准备工作. 一.:Feature 示例: Scenario: E-251:维护薪资帐套明细 When I ...

  6. 如何实现一个字符的反转 （Java）

    一..通过jdk自带reverse的方法.

  7. 【Python爬虫】PyQuery解析库

    PyQuery解析库 阅读目录 初始化 基本CSS选择器 查找元素 遍历 获取信息 DOM操作 伪类选择器 PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎 ...

  8. jquery中$.get()提交和$.post()提交的区别

    相同点:都是异步请求的方式来获取服务器端的数据: 异同点: 1.请求方式不同:$.get()方法使用 GET 方法来进行异步请求的:$.post()方法使用POST方法来进行异步请求的: 2.参数传递 ...

  9. 008-Centos 7.x安装 Ambari 2.2.2 + HDP 2.4.2 搭建Hadoop集群

    1.安装环境说明 安装前先安装好 Centos 7.2, jdk-8u91, mysql5.7.13 一共有3台机器,一个是主节点192.168.111.10,两个是从:192.168.111.11, ...

  10. tortoiseSVN版本合并（merge）

    原文地址:http://blog.163.com/qq371557620@yeah/blog/static/8428365820172110320574/ 编码过程中,我们经常会遇到需要多个分支并行开 ...