vue学习笔记【八、过渡动画】

<template>
	<div id="app">
		<button @click="show=!show">切换</button>
		<transition name="fade">
			<div class="box" v-if="show">lk</div>
		</transition>
	</div>
</template>

<script>
	export default{
		name:"ComputedAndWatch",
		data(){
			return {
				show:false
			}
		},
	}
</script>

<style scoped>
	.box{
		width: 200px;
		height: 200px;
		background-color: red;
		color: #fff;
		font-size: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.fade-enter, .fade-leave-to{
		opacity: 0;
		transform: translateX(200px) scale(3);
	}
	
	.fade-enter-active, .fade-leave-active{
		transition: all 2s ease-in-out;
	}
</style>