手机端 自定义简单的下拉动画效果选择框 解决过渡失效

手机端 自定义简单的下拉动画效果选择框 解决过渡失效

<template>
// 弹出框触发 并显示选择结果
   <view class="header_top_sel" @click="showSelect">
		<text>{{teach[list.teach].label}}</text>
		//默认提示文本也可以不要
		<text v-if="list.teach==-1">{{请选择}}</text>
		<image src="../../../static/img/main/recom_6.png"></image>
  </view>
// 教师资格选择弹出框 
		<view class="dlog_bg dlog_select_bg" v-show="select.show"  @click="closeSel">
			<view id="select" class="dlog_select" :class="select.sty">
				<view class="select_info">
					<view class="selevt_row" v-for="(item,index) in teach" :key="index" @click="getSelected(item.val)">
						{{item.label}}
					</view>
				</view>
				<view class="select_foot" @click="closeSel()">取消</view>
			</view>
		</view>
</template>
<script>
	export default {
         data() {
			return {
				select:{
					sty:'',
					show:false
				},
				teach:[
					{val:0,label:'小学教师资格证',dsc:'原价1688元，预计收益12元'},
					{val:1,label:'小学教师资格证',dsc:'原价1688元，预计收益18元'},
					{val:2,label:'小学教师资格证',dsc:'原价1688元，预计收益18元'},
					{val:3,label:'小学教师资格证',dsc:'原价1688元，预计收益12元'},
					{val:4,label:'小学教师资格证',dsc:'原价1688元，预计收益18元'},
					{val:5,label:'小学教师资格证',dsc:'原价1688元，预计收益18元'}
				],
				list:{
					teach:-1
				}
			};
		},
		methods:{
		    //获取选择结果
			getSelected(val){
				this.list.teach=val
				this.closeSel()
			},
			//关闭选择框
			closeSel(){
				this.select.sty=''
				setTimeout(()=>{
					this.select.show=false
				},500)
			},
			//打开选择框
			showSelect(){
			// 这里的定时器目的就是为了解决因为display导致后面的transition无法生效
			// 让其先改变display状态再触发transition，transform就可以产生动画过度
				this.select.show=true
				setTimeout(()=>{
					this.select.sty='dlog_selectAction'
				},100)
			},
		}
	}
</script>
<style lang="scss">
.dlog_bg{
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height:100vh;
		z-index: 2019;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: rgba(136, 129, 129, 0.60);
		.dlog_info{
			border-radius:20upx;
		}
	}
	// 下拉弹出选择
	.dlog_select_bg{
		align-items: flex-end;
		.dlog_select{
			transform: translateY(100%);
			transition:transform 0.5s ;
		}
		.dlog_selectAction{
			transform: translateY(0);
		}
		#select{
			width: 100%;
			text-align: center;
			background: #fff;
			border-radius:20upx 20upx 0 0;
			.select_info{
				.selevt_row{
					border-bottom:1px solid #f6f6f6;
					padding: 20upx 0;
				}
				>view:last-child{
					border:none;
				}
			}
			.select_foot{
				border-top:4px solid #ede8e8;
				padding: 20upx 0;
			}
		}
	}
	</style>