yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat: 侧边栏 外观切换过渡效果

Browse Source
This commit is contained in:
pengzhanbo 2024-02-04 10:32:08 +08:00
parent 61e6e17894
commit 42bf1481a1
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
theme/src/client/components/Sidebar.vue
View File

@ -70,7 +70,9 @@ watch(
box-shadow: var(--vp-c-shadow-3);
opacity: 0;
transition:
opacity 0.5s,
opacity var(--t-color),
background-color var(--t-color),
box-shadow var(--t-color),
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateX(-100%);
@ -130,6 +132,7 @@ watch(
margin-right: -32px;
margin-left: -32px;
background-color: var(--vp-sidebar-bg-color);
transition: background-color var(--t-color);
}
}
@ -140,6 +143,7 @@ watch(
.group + .group {
padding-top: 10px;
border-top: 1px solid var(--vp-c-divider);
transition: border-top var(--t-color);
}
@media (min-width: 960px) {

9
theme/src/client/components/SidebarItem.vue
View File

@ -131,7 +131,7 @@ function onCaretClick() {
bottom: 6px;
left: -17px;
width: 1px;
transition: background-color 0.25s;
transition: background-color var(--t-color);
}
.sidebar-item.level-2.is-active > .item > .indicator,
@ -151,7 +151,7 @@ function onCaretClick() {
padding: 4px 0;
font-size: 14px;
line-height: 24px;
transition: color 0.25s;
transition: color var(--t-color);
}
.sidebar-item.level-0 .text {
@ -204,7 +204,7 @@ function onCaretClick() {
margin-right: -7px;
color: var(--vp-c-text-3);
cursor: pointer;
transition: color 0.25s;
transition: color var(--t-color);
}
.item:hover .caret {
@ -219,7 +219,7 @@ function onCaretClick() {
width: 18px;
height: 18px;
fill: currentcolor;
transition: transform 0.25s;
transition: transform var(--t-color);
transform: rotate(90deg);
}
@ -234,6 +234,7 @@ function onCaretClick() {
.sidebar-item.level-5 .items {
padding-left: 16px;
border-left: 1px solid var(--vp-c-divider);
transition: border-left var(--t-color);
}
.sidebar-item.collapsed .items {