直播平台软件开发，Vue上拉框显示隐藏动画

css简单布局

<br>.picker {<br>   height: 300px;<br>    background: #fff;<br>    width: 100%;<br>    position: fixed;<br>    left: 0;<br>    bottom: 0;<br>    z-index: 2020;<br>    overflow-y: scroll;<br>    box-shadow: 0 0 12px 0 #f4f4f4;<br>}<br>.picker-item {<br>    font-size: 14px;<br>    padding: 15px;<br>    text-align: center;<br>}<br>/* 容器 高度进入和离开 的过渡动画 */<br>.picker-enter-active,.picker-leave-active{<br>    transition: height .3s;<br>}<br>/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */<br>.picker-enter,.picker-leave-to{<br>    height: 0;<br>}<br>/* 定义进入过渡的结束状态 和 离开过渡的开始状态 */<br>.picker-enter-to,.picker-leave {<br>    height: 300px;<br>}<br> 

<br><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><br><script><br>    new Vue({<br>        el: ".page",<br>        data() {<br>            return {<br>                showPicker: false<br>            }<br>        },<br>        methods: {<br>            showPickerfn() {<br>                this.showPicker = !this.showPicker<br>            },<br>            closePicker() {<br>                this.showPicker = false<br>            }<br>        },<br>    })<br></script>

以上就是直播平台软件开发，Vue上拉框显示隐藏动画，更多内容欢迎关注之后的文章