手机端 自定义简单的下拉动画效果选择框 解决过渡失效
<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=valthis.closeSel()},//关闭选择框closeSel(){this.select.sty=''setTimeout(()=>{this.select.show=false},500)},//打开选择框showSelect(){// 这里的定时器目的就是为了解决因为display导致后面的transition无法生效// 让其先改变display状态再触发transition，transform就可以产生动画过度this.select.show=truesetTimeout(()=>{this.select.sty='dlog_selectAction'},100)},}}</script><style lang="scss">.dlog_bg{position: fixed;top: 0;right: 0;width: 100vw;height:100vh;z-index: ;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>
