直播平台软件开发，Vue上拉框显示隐藏动画
css简单布局
.picker {
height: 300px;
background: #fff;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 2020;
overflow-y: scroll;
box-shadow: 0 0 12px 0 #f4f4f4;
}
.picker-item {
font-size: 14px;
padding: 15px;
text-align: center;
}
/* 容器 高度进入和离开 的过渡动画 */
.picker-enter-active,.picker-leave-active{
transition: height .3s;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.picker-enter,.picker-leave-to{
height: 0;
}
/* 定义进入过渡的结束状态 和 离开过渡的开始状态 */
.picker-enter-to,.picker-leave {
height: 300px;
}
js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: ".page",
data() {
return {
showPicker: false
}
},
methods: {
showPickerfn() {
this.showPicker = !this.showPicker
},
closePicker() {
this.showPicker = false
}
},
})
</script>
以上就是 直播平台软件开发，Vue上拉框显示隐藏动画，更多内容欢迎关注之后的文章