vue 底部弹出层渐入渐出动画

 

 

 

 

 

<template>
  <!-- 月份滑块组件 -->
    <div class="picker">
        <button @click="handlePickerBtn('底部弹出')">底部弹出</button>
        <div class="picker-box" :class="{'picker-box-activate': pickerState}">
            <div class="picker-center">
                <div class="picker-button">
                    <span @click="handlePickerBtn('取消')">取消</span>
                    <span @click="handlePickerBtn('确认')">确认</span>
                </div>
                <van-picker :columns="columns" @change="onChange" />
            </div>
        </div>
    </div>
</template>

<script>
    import { Picker } from 'vant';

    export default {
    data() {
        return {
            columns: [
                '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
            ],
            pickerValue: '',
            pickerState: false
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        onChange(picker, value, index) {
            console.log(value, 1);
            this.pickerValue = value;
        },
        handlePickerBtn (val) {
            val == '底部弹出' ? this.pickerState = true : this.pickerState = false;
            console.log(this.pickerValue, 2);
        }
    },
}
</script>

<style lang='less' scoped>
.picker {
    width: 100%;
    height: 100%;
    background: #ededed;
    position: relative;
    // 渐入动画
    .picker-box {
        width: 100%;
        height: auto;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 0.3s all;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        .picker-center {
            width: 100%;
            height: 100%;
            position: relative;
            .picker-button {
                width: 100%;
                height: 3rem;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                z-index: 9999;
                span {
                    width: 4.5rem;
                    height: 100%;
                    color: #1989fa;
                    font-size: 1rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .van-picker {
                border-top: 1px solid #e6e6e6;
            }
        }
    }
    // 渐出动画
    .picker-box-activate {
        transition: 0.3s all;
        transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }
}
</style>