vue中使用第三方插件animate.css实现动画效果
1.首先先引入第三方类animated.css
2.将你所需要动画的标签用包裹起来
3.在transition元素中添加enter-active-class/leave-active-class入场离场属性
但是设置的值前面必须加上animated（当然也可以不在transition上设置animated，可以在你所要进行动画的标签上设置class属性为animated）
4.也可以加入:duration来统一设置入场和离场时候的时长
案例如下

<!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/vue.js"></script>
<link rel="stylesheet" href="lib/animate.css">
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<h3 v-if="flag">这是一个H3</h3>
</transition> -->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration:"400">
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{

}
})
</script>
</body>
</html>

vue中使用第三方插件animate.css实现动画效果的更多相关文章

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

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

  2. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  3. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  4. 项目中整合第三方插件与SpringMVC数据格式化关于ip地址

    一.Bootstrap 响应式按钮 <div calss="col-sm-2"> <button class="btn btn-default btn- ...

  5. Vue中的better-scroll插件

    Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...

  6. 在vue中使用天气插件

    在vue中使用天气插件 插件网址:  中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin ...

  7. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  8. vue中使用video插件vue-video-player

    一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...

  9. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

随机推荐

  1. redis系列（三）：python操作redis

    1.安装包 pip install redis 2.使用 # -*- coding: utf-8 -*- # @Time : 18-12-7 下午4:33 # @Author : Felix Wang ...

  2. 23333 又是一篇水文章（以下是各种复制来的关于maven转成eclipse项目）

    (转载) 当我们通过模版(比如最简单的maven-archetype-quikstart插件)生成了一个maven的项目结构时,如何将它转换成eclipse支持的java project呢? 1. 定 ...

  3. 利用前端三大件（html+css+js）开发一个简单的“todolist”项目

    一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...

  4. 在centos7上使用packstack安装openstack

    简介 Packstack主要是由Redhat推出的用于概念验证(PoC)环境快速部署的工具.Packstack是一个命令行工具,它使用Python封装了Puppet模块,通过SSH在服务器上部署Ope ...

  5. sql server解锁表

    EXEC sp_who active --看哪个引起的阻塞,blk blk<>0 --解锁表declare @spid intSet @spid = 274 --锁表进程declare @ ...

  6. 查看Oracle表空间使用情况

    1.查询表空间的总容量 as MB from sys.dba_data_files a group by a.TABLESPACE_NAME 2.查询表空间的空闲容量 select b.TABLESP ...

  7. springboot实现异步调用

    介绍 所谓的异步执行其实就是使用多线程的方式实现异步调用. 异步有什么好处呢? 如果一个业务逻辑执行完成需要多个步骤,也就是调用多个方法去执行, 这个时候异步执行比同步执行相应更快.不过要注意异步请求 ...

  8. 使 nodejs 代码 在后端运行（nohup）

    1.代码 nohup node server.js & 说明: nohup 命令对 server.js 进程做了三件事 (1)阻止SIGHUP信号发到这个进程. (2)关闭标准输入.该进程不再 ...

  9. Facebook币Libra学习-2.交易生命周期

    交易生命周期 为了更加深入的理解Libra的交易生命周期,我们将跟随一个交易的全过程,从其被提交到Libra validator始,直至其被添加到区块链上止.我们将“放大”来看每个validator逻 ...

  10. Java同步数据结构之ConcurrentLinkedQueue

    前言 前面介绍的Queue都是通过Lock锁实现的阻塞队列,今天介绍一种非阻塞队列ConcurrentLinkedQueue,所谓非阻塞,其实就是通过CAS代替加锁来实现的高效的非阻塞队列.当许多线程 ...