vue: implement simple sidebar pop-up animation

<template>
    <div>
        <button @click="openDialog"> 弹出窗口 </button>
        <div v-if="dialogVisible">
            <p> 这是弹出窗口 </p>
            <button @click="closeDialog"> 关闭窗口 </button>
        </div>
    </div>

    <div class="box">
        <button @click="getPop()">动画弹窗</button>
        <div class="bg" v-if="isShow" @click="closePop()"></div>
        <div class="drawer" :class="isShow ? 'show' : 'hidden'"></div>
    </div>
</template>

<script>
export default {
    
    
    name: 'VueTestButtonDivButtonTabs',

    data() {
    
    
        return {
    
    
            dialogVisible: false,
            isShow: false,
        };
    },

    mounted() {
    
    

    },

    methods: {
    
    
        openDialog() {
    
    
            this.dialogVisible = true
        },
        closeDialog() {
    
    
            this.dialogVisible = false
        },
        getPop() {
    
    
            this.isShow = true
        },
        closePop() {
    
    
            this.isShow = false
        }
    },
};
</script>

<style lang="scss" scoped>
.bg {
    
    
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .drawer {
    
    
        position: fixed;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: #304156;
        z-index: 10;
        transition: all 0.3s;
    }

    .show {
    
    
        transform: translateX(0);
    }

    .hidden {
    
    
        transform: translateX(100%);
    }</style>