vue动画实现循环切换

注意动画的钩子函数的判断逻辑，注意动画编写时类名的顺序！！<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue</tit

guoxiaxing

2775人浏览 · 2018-08-12 19:06:43

guoxiaxing · 2018-08-12 19:06:43 发布

注意动画的钩子函数的判断逻辑，注意动画编写时类名的顺序！！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<style>	
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.guo-enter-active,.guo-leave-active{
			width: 200px;
			height: 200px;
			opacity: 1;
			background-color: red;
			transition: 0.7s;
		}
		.guo-leave-to{
			width: 100px;
			height: 100px;
			opacity: 0;
			background-color: orange;
		}
		.guo-enter{
			width: 100px;
			height: 100px;
			opacity: 0;
			background-color: orange;
		}
		.box2{
			margin-top: 100px;
		}
	</style>
	<script src='vue.min.js'></script>
</head>
<body>
	<div id='app'>
		<div>
			<input type="button" value='change' @click='change'>
			<transition name='guo' @after-enter='Enter' @after-leave='Leave'>
				<div v-show='show' class='box'></div>
			</transition>
			<transition name='guo'  @enter='Enter2' @after-leave='Leave2'>
				<div v-show='show2' class='box box2'></div>
			</transition>
		</div>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				show:false,
				show2:false
			},
			methods:{
				change(){
					this.show = !this.show;
				},
				Enter(){
					this.show2 = true;
				},
				Leave(){
					this.show2=false;
				},
				Leave2(){
					this.show = true;
				},
				Enter2(){
					this.show = 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}$/, //不连续的两位字母// /^