Question

我使用带有两列的 css 网格创建了我的布局：

.app {
    height: 100vh;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 56px 1fr 40px;
    grid-template-areas: "menu header" "menu content" "menu footer";
}

现在我想添加平滑过渡。我做了以下事情：当我点击标题组件的切换按钮时，我隐藏了我的侧边栏组件。

.hide-menu {
    grid-template-areas:
        "header header"
        "content content"
        "footer footer";
}

问题是布局中断了。

我不知道在布局组件的 translateX 中要传递什么作为参数。我想这是我的问题。

.openMain {
    transform: translateX(-260px); <<<<<<<<
    transition: all 500ms linear;
}

你能帮我找出我哪里出错了吗？

完整代码

布局组件

<template>
    <div class="app" :class="{ 'hide-menu': ! isMenuVisible, closeMain: isMenuVisible, openMain: ! isMenuVisible}">
        <lheader />
        <lmenu />
        <main class="main p-5" style="overflow: auto">
            <slot />
        </main>
        <lfooter />
    </div>
</template>

<script>
import Lheader from "./Lheader.vue";
import Lfooter from "./Lfooter.vue";
import Lmenu from "./Lmenu.vue";
import { mapState } from "vuex";

export default {
    name: "Layout",
    computed: mapState(["isMenuVisible"]),
    components: {
        Lheader,
        Lfooter,
        Lmenu,
    },
};
</script>

<style>
.app {
    height: 100vh;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 56px 1fr 40px;
    grid-template-areas: "menu header" "menu content" "menu footer";
}
.main {
    grid-area: content;
    background-color: #ebedef;
}
.hide-menu {
    grid-template-areas:
        "header header"
        "content content"
        "footer footer";
}
.openMain {
    transform: translateX(-260px);
    transition: all 500ms linear;
}
.closeMain {
    transform: translateX(0);
    transition: all 500ms linear;
}

</style>

菜单（侧边栏）组件

<template>        
    <aside :class="{ openSidebar:isMenuVisible, closeSidebar:!isMenuVisible }" class="menu text-white border-r
        border-gray-400">
        <div class="flex justify-center items-center h-14 bg-gray-800">
            Brand
        </div>
        <div class="flex flex-col">
            <ul>
                <inertia-link href="/">
                    <li class="flex items-center p-5 hover:bg-gray-700 cursor-pointer "
                        :class="isUrl('') ? 'bg-gray-700' : ''">
                            <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
                    </li>
                </inertia-link>
                <li class="flex flex-col p-5 hover:bg-gray-700 cursor-pointer"
                    :class="isUrl('users/index') ? 'bg-gray-700' : ''">
                    <a href="#" class="flex items-center" @click="usersMenu = !usersMenu">
                        <div class="flex-grow">
                            <i class="fas fa-users mr-2"></i>Users
                        </div>
                        <div>
                            <i class="fas" :class="{'fa-angle-down': usersMenu, 'fa-angle-left': !usersMenu }">
                            </i>
                        </div>
                    </a>
                    <ul class="flex flex-col pt-5" :class="{ hidden: usersMenu }">
                        <inertia-link href="/users/index">
                            <li class="flex items-center h-14 px-6 hover:bg-gray-600 cursor-pointer rounded
                                transition duration-500 ease-in-out"
                                :class=" isUrl('users/index') ? 'bg-gray-600' : ''" >
                                    <i class="fas fa-list mr-2"></i>List
                            </li>
                        </inertia-link>
                        <inertia-link href="/users/report">
                            <li class="flex items-center h-14 px-6 hover:bg-gray-600 cursor-pointer rounded
                                transition duration-500 ease-in-out"
                                :class=" isUrl('users/report') ? 'bg-gray-600' : ''" >
                                    <i class="fas fa-list mr-2"></i>Report
                            </li>
                        </inertia-link>
                    </ul>
                </li>
            </ul>
        </div>
    </aside>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: "Menu",
    computed: mapState(['isMenuVisible']),
    data() {
        return {
            usersMenu: true
        };
    },
    methods: {
        isUrl(...urls) {
            let currentUrl = this.$page.url.substr(1);
            if (urls[0] === "") {
                return currentUrl === "";
            }
            return urls.filter((url) => currentUrl.startsWith(url)).length;
        }
    },
};
</script>

<style>
.menu {
    grid-area: menu;
    background-color: #3c4b64;
}
.openSidebar {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: all 500ms linear;
}
.closeSidebar {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-260px);
    transition: all 500ms linear;
}
</style>

Answer 1

只需调整侧边栏的宽度，将网格中的列宽设置为自动即可。

Grid 将为您进行调整。

在代码段中，只需悬停网格即可隐藏侧边栏

.app {
  height: 100vh;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 56px 1fr 40px;
  grid-template-areas: "menu header" "menu content" "menu footer";
}

.menu {
   grid-area: "menu";
   width: 260px;
   height: 100vh;
   background-color: lightblue;
   transition: width 1s;
   overflow: hidden;
}

.app:hover .menu {
    width: 0px;
}

.header {
   grid-area: header;
}

.content {
   grid-area: content;
}

.footer {
   grid-area: footer;
}

<div class="app">
  <div class="menu">MENU</div>
  <div class="header">HEADER</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

Answer 2

首先，我不认为这会是我做这类事情的方式，但是，既然这是您要问的，您是否尝试过：

.app {
    height: 100vh;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 56px 1fr 40px;
    grid-template-areas: "menu header" "menu content" "menu footer";
}

.hide-menu {
    grid-template-columns: 0px 1fr;
    grid-template-areas:
        "menu header"
        "menu content"
        "menu footer";
}

也许您还应该在单击该按钮时为菜单提供类似 transform: scaleX(0) 的内容。

我认为这里的主要问题实际上是您的 translate。您首先删除侧边栏，然后将所有内容转换为侧边栏的宽度。这就是为什么正确的内容会额外移动。也许你可以从删除翻译开始，看看会发生什么诚实......

隐藏侧边栏时添加过渡

2 个答案: