vue transition动画

1、展开收起动画

<template>
	<button @click="show= !show">点击展开/关闭</button>
	<!--这里的name 和 css 类名第一个字段要一样-->
	<transition name="popup">
		<div class="box" v-show="show"></div>
	</transition>
</template>
<script>
	export default {
		data() {
			return {
				show:false,//默认隐藏
			}
		}
	}
</script>
<style>
	.box{
	    height:200px;
	    background:#000;
	    overflow: hidden;
	}
	.popup-enter-active, .popup-leave-active {
	    transition: all 1s ease;
	}
	.popup-enter, .popup-leave-to{
	    height: 0;
	}
</style>

2、滑动隐藏动画

<template>
	<button @click="show= !show">点击展开/关闭</button>
	<!--这里的name 和 css 类名第一个字段要一样-->
	<transition name="popup">
		<div class="box" v-show="show"></div>
	</transition>
</template>
<script>
	export default {
		data() {
			return {
				show:true,
			}
		}
	}
</script>
<style>
	.box{
		height:200px;
		width: 100%;
		background-color:black;
	}
	/* 右测滑动进出 */
	.leftFand-enter-active,.leftFand-leave-active {
		transition: all .2s linear;
		transform: translate3D(0, 0, 0);
	}
	.leftFand-enter,.leftFand-leave-to {
		transform: translate3D(100%, 0, 0);
	}

	/* 左侧滑动进出 */
	.leftFand-enter-active,.leftFand-leave-active {
		transition: all .2s linear;
		transform: translate3D(0, 0, 0);
	}
	.leftFand-enter,.leftFand-leave-to {
		transform: translate3D(-100%, 0, 0);
	}
	
	/* 顶部滑动进出 不适合使用展开收起效果 （通常用于提示弹窗） */
	.leftFand-enter-active,.leftFand-leave-active {
		transition: all .2s linear;
		transform: translate3D(0, 0, 0);
	}
	.leftFand-enter,.leftFand-leave-to {
		transform: translate3D(0, 100%, 0);
	}
	
</style>