Vue简单的动画案例

<template>
	<div class="page page1">
		<button @click="dianji">点击</button>
		<transition name="donghua">
			<div class="block" v-if="show"></div>
		</transition>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			dianji: function() {
				this.show = !this.show
			}
		}
	}
</script>
<style>
	.page1 {
		position: fixed;
		width: 100%;
		height: 200px;
		font-size: 36px;
	}
	
	.block {
		width: 200px;
		height: 100px;
		background: lightblue;
	}
	
	.donghua-enter-active,
	.donghua-leave-active {
		position: absolute;
		transition: all .5s;
		transform: translate3d(0px, 0px, 0px);
	}
	
	.donghua-enter,
	.donghua-leave-to {
		position: absolute;
		transform: translate3d(200px, 0px, 0px);
	}
</style>