Animate.css在vue中的使用

Animate.ss的动画效果超可爱的，用起来也方便，最近用了，记录一下????vue中animate.css的安装和使用安装：npm install animate.css --save//或者yarn add animate.css使用???? 在入口文件中引入import animate from 'animate.css'Vue.use(animate)???? 选择你要的样...

FIRE

2863人浏览 · 2019-09-29 20:16:31

FIRE · 2019-09-29 20:16:31 发布

Animate.ss的动画效果超可爱的，用起来也方便，最近用了，记录一下

? vue中animate.css的安装和使用

安装：

npm install animate.css --save
//或者
yarn add animate.css

使用

? 在入口文件中引入

import animate from 'animate.css'
Vue.use(animate)

? 选择你要的样式

打开官网Animate.css
在这里插入图片描述
? 具体使用
在你需要动画样式的地方把样式名称写上就行
注意！一定要写这个animated

? animate.css在vue中的入场和离场动画
enter-active-class和leave-active-class在vue官网中有介绍
点击，vue官网走一波

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画-未使用动画</title>
		<link rel="stylesheet" href="css/animate.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<style>
			.demo{
				width: 150px;
				height: 150px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!--点击按钮让h3显示，再点击，让h3显示-->	
		<div id="example">
			<input type="button" value="btn" @click="flag=!flag"/>			
			<!--使用transtion元素把需要被动画控制的元素包裹起来-->
			<!--transition元素是官方提供的--> 
			<!--使用animate.css库-->
			<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="400"><!--入场和离场的时间-->
				<div v-if="flag" class="demo">
					<span>animate.css的动画效果实现</span>
				</div>
			</transition>			
		</div>
		<script>
			var vm=new Vue({
				el:'#example',
				data:{
					flag:false
				}
			})
		</script>
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^