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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值