html - 隐藏侧边栏时添加过渡
问题描述
我使用带有两列的 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>
解决方案
只需调整侧边栏的宽度,并将网格中的列宽设置为自动。
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>
推荐阅读
- validation - 如何在 Spring Boot 中使用 @NotNull?
- html - 获取 API 数据并使用 nodejs 将其显示在网页上?
- javascript - 如何使用 parallax.js 将多个元素定位在中心?
- java - Json 对象保存为 String 而不是 Object
- java - flowable integration break jhipster maven 集成测试
- r - 如何在同一函数中使用 ifelse / lag / mutate 替换值和单词?
- amazon-web-services - AWS 现场实例/重启更快
- javascript - 为什么 Vue.js 模板不能交互它的脚本?
- python - Python模块化编程中导入模块的正确方法是什么?
- ssl - 我的第三方 SSL 无法在主域 GoDaddy 上运行