vue：实现简单侧边栏弹出动画

最新推荐文章于 2024-09-06 15:00:38 发布

_乐多_

最新推荐文章于 2024-09-06 15:00:38 发布

阅读量704

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yyyyyyyyyyy_9/article/details/132731798

版权

Vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在这里插入图片描述

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