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

<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: 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>

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

纯CSS实现导航栏下拉动画效果
实现思路导航栏的下拉效果通过在ul的li里再嵌套一个ul,再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果.老铁没毛病. 实现效果: HTML代码 <div cla ...
android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...
Android开发中利用ListView实现一个渐变式的下拉刷新动画发布时间:2020-11-23 16:50:31 来源:亿速云阅读:80 作者:Leah 本篇文章给大家分享的是有关Androi ...
微信小程序 ios自定义导航栏下拉“橡皮筋” 效果
问题: 1.微信小程序ios中如果自定义导航栏取消了橡皮筋效果页面无法滑动 2.如果不取消,页面往下拉时会与顶部有一大片空白(安卓本身scrollTop不会有负值) 3.fixed之后absolute ...
.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统
https://www.zhihu.com/video/1246932038927360000 每日测验 """ 答案 1. 昨日内容回顾样式类操作 "&qu ...
可输入可下拉的输入选择框
2019独角兽企业重金招聘Python工程师标准>>> PC <div class="row form-horizontal"> ...
js简单的下拉选中效果
css样式: *{ margin:0px auto; padding:0px} #xiala{ width:180px; height:33px; border:1px solid #999;text ...
jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...
android自带下拉阻尼动画,Android实现简单的下拉阻尼效应示例代码
OS的下拉上拉都会出现一个很玄的动态效果.在Android中,虽然可以实现类似的效果,但有点不同的是,如果调用overScrollBy来实现类似的阻尼效应的话,最顶部会出现一片亮的区域,让人感觉不是很 ...
html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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