vue2内置组件Transition实现点击菜单滑出数据大屏

点击菜单滑出数据大屏，一开始想用eleui组件实现，但是改变对话之类框的样式怎么都不生效，最后使用vue内置组件transition标签包自己写的数据大屏实现了

菜单点击部分

<el-menu-item @click="showdata = true" type="primary">
                        <i class="el-icon-data-analysis"></i>数据大屏
                    </el-menu-item>

transition标签包括显示数据大屏组件

<transition
            name="slide"
            style="width: 100%; height: 100%; background-color: #000"
        >
            <div class="dialog" v-if="showdata" tabindex="0">
                <img
                    src="../assets/img/close.png"
                    @click="showdata = false"
                    class="closeshowdata"
                />
                <date />
            </div>
        </transition>

data定义

data() {
        return {
            show3: false,
            showdata: false,
        };
    },

样式部分

.slide-enter-active {
    transition: transform 0.5s;
}

.slide-enter {
    transform: translateY(-100%);
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.dialog {
    width: 100%;
    max-width: 100%;
    background-color: #000;
    border-radius: 8px;
    top: -100%;
    position: relative;
}

.closeshowdata {
    border: none;
    width: 4%;
    height: 5%;
    border-radius: 50%;
    position: absolute;
    top: 7.3%;
    left: 4%;
    z-index: 999;
}