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

<!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>

 

Logo

前往低代码交流专区

更多推荐