uniapp 动画 主动效果

主要代码如下所示，首先要有一个变量进行控制，我这里用了”isShowTypePop“这个变量主动去控制动画，样式”type_pop“是动画开始，样式”type_pop.active“是动画结束，其中主要变化的是宽高，所以我这边在active里面写的也只有宽高，animation这一行可以控制动画速度

<view class="type_pop" :class="isShowTypePop?'active':''" >

	.type_pop{
		background-color: #FFFFFF;
		width: 100vw;
		height: 50px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.type_pop.active{
		width: 100vw;
		height: 200px;
		animation: left 0.5s;
	}
	@keyframes left {
	  0% {height:50px}
	  100% {height: 200px}
	}