<!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. 转：HashMap实现原理分析（面试问题：两个hashcode相同 的对象怎么存入hashmap的）

    原文地址:https://www.cnblogs.com/faunjoe88/p/7992319.html 主要内容: 1)put   疑问:如果两个key通过hash%Entry[].length得 ...

  2. LeetCode 706 Design HashMap 解题报告

    题目要求 Design a HashMap without using any built-in hash table libraries. To be specific, your design s ...

  3. Appium入门（3）__ Appium Server安装

    安装Appium 1.下载并安装:https://bitbucket.org/appium/appium.app/downloads/ 2. 系统变量PATH 增加 C:\Program Files ...

  4. 关于swagger-ui 参数为中文的时候，后端乱码

    项目中用swagger-ui来测试接口,但是发现,参数是中文的时候,后台接收的时候会出现乱码. 不得改用postman,就没事了, 立贴求助,希望有人可以说下这个怎么配置. 后面发现是后端的编码过滤器 ...

  5. Java 第二次测试总结

    Java 第二次测试总结 1. 相关知识点总结 Java测试题循环与递归知识点 补充知识点: for循环语句:for(表达式1:表达式2:表达式3)表达式一负责完成变量的初始化!表达式2是值为bool ...

  6. MATLAB中产生随机数的那些函数

    1.产生从imin~imax的m*n矩阵 randi([imin,imax],m,n); 2.产生1~n的无重复随机整数 randperm(n);

  7. java安全删除一个文件，防止工具恢复数据

    解决移动端文件删除的安全问题:file.delect()   Java 确保安全删除某个文件 http://outofmemory.cn/code-snippet/14222/Java-securit ...

  8. Python3学习之路~6.2 实例演示面向对象编程的好处

    首先建一个dog类,实例化为3个dog对象,并让它们都叫. class Dog: def bulk(self): print("xiaohuang:wang wang wang !" ...

  9. JS中函数表达式与函数声明的区别

    hello,沐晴又来更新啦,今天呢,跟大家讲讲让人头疼的函数表达式和函数声明,反正我当初看那本高级程序的时候,是没怎么看太透,哈哈.我是个比较重基础的人,跟我一起探讨函数表达式和函数声明的世界吧. 首 ...

  10. 001-分布式理论-CAP定理

    一.概述 CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性)这三个基本需求 ...