vue中使用第三方插件animate.css实现动画效果
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实现动画效果的更多相关文章
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- vue-cli项目中引入第三方插件
前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...
- 项目中整合第三方插件与SpringMVC数据格式化关于ip地址
一.Bootstrap 响应式按钮 <div calss="col-sm-2"> <button class="btn btn-default btn- ...
- Vue中的better-scroll插件
Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...
- 在vue中使用天气插件
在vue中使用天气插件 插件网址: 中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- vue中使用video插件vue-video-player
一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
随机推荐
- MySQL index使用率查询
SELECT t.table_schema AS db, t.table_name AS tab_name, s.index_name AS index_name, s.column_ ...
- 【线性代数】6-3:微分方程的应用(Applications to Differential Equations)
title: [线性代数]6-3:微分方程的应用(Applications to Differential Equations) categories: Mathematic Linear Algeb ...
- uiautomatorviewer真机使用报错Error obtaining UI hierarchy
Mac OS+Android真机 8.0在使用uiautomatorviewer获取界面时报Error obtaining UI hierarchy Reason: Error while obtai ...
- Node解析之----模块机制篇
开篇前,我们先来看张图, 看node与W3C组织.CommonJS组织.ECMAScript之间的关系. Node借鉴来CommonJS的Modules规范实现了一套非常易用的模块系统,NPM对Pac ...
- Tecplot中如何计算Ma数(马赫数)【转载】
转载自:http://blog.163.com/wanglei2146073@126/blog/static/90689607201282555055144/ fluent是我们常用的CFD软件,但由 ...
- linux安装puppeteer
1.安装 下载淘宝镜像的,可以同时下载puppeteer和chromium下面两条语句即可 npm install -g cnpm --registry=https://registry.npm.ta ...
- "数字经济"云安全共测大赛Web-Writeup
gameapp 这题首先反编译apk,简单看了看代码,主要是有startgame和score两个api,然后用模拟器(手机登不上)安装apk抓了下包,数据经过了rsa加密,所以首先用python实现r ...
- VScode优化记录
主题: One Dark Pro VS Code 官网页面 这是为 VS Code准备的 One Dark 主题,他是 Atom 标志性的主题.需要我说更多吗?我喜欢这个主题. Mon ...
- Mysql mysqldumpslow命令详解
mysqldumpslow命令 /path/mysqldumpslow -s c -t 10 /database/mysql/slow-log 这会输出记录次数最多的10条SQL语句. 其中: -s, ...
- MySQL 创建删除和选择数据库
使用 create 命令创建数据库,语法如下: CREATE DATABASE 数据库名; 删除数据库 drop database <数据库名>; 选择数据库 use 数据库名 Datab ...