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:19:03 +08:00
parent 062cc88a6a
commit e3a9c07ed3
15 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
theme/src/client/components/DocOutlineItem.vue
View File

@ -42,13 +42,12 @@ function onClick({ target: el }: Event) {
color: var(--vp-c-text-2);
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.5s;
transition: color var(--t-color);
}
.outline-link:hover,
.outline-link.active {
color: var(--vp-c-text-1);
transition: color 0.25s;
}
.outline-link.nested {

5
theme/src/client/components/LocalNav.vue
View File

@ -84,8 +84,9 @@ const showLocalNav = computed(() => {
border-top: 1px solid var(--vp-c-gutter);
border-bottom: 1px solid var(--vp-c-gutter);
transition:
border-color 0.5s,
background-color 0.5s;
border-color var(--t-color),
background-color var(--t-color),
border var(--t-color);
}
.local-nav.fixed {

5
theme/src/client/components/LocalNavOutlineDropdown.vue
View File

@ -84,12 +84,11 @@ function scrollToTop() {
font-weight: 500;
line-height: 24px;
color: var(--vp-c-text-2);
transition: color 0.5s;
transition: color var(--t-color);
}
.local-nav-outline-dropdown button:hover {
color: var(--vp-c-text-1);
transition: color 0.25s;
}
.local-nav-outline-dropdown button.open {
@ -127,6 +126,8 @@ function scrollToTop() {
border: 1px solid var(--vp-c-border);
border-radius: 8px;
box-shadow: var(--vp-shadow-3);
transition: var(--t-color);
transition-property: background-color, border, box-shadow;
}
.header {

22
theme/src/client/components/Nav/NavBar.vue
View File

@ -66,6 +66,8 @@ watchPostEffect(() => {
white-space: nowrap;
pointer-events: none;
border-bottom: 1px solid transparent;
transition: var(--t-color);
transition-property: background-color, color, border-bottom;
}
@media (min-width: 768px) {
@ -107,7 +109,7 @@ watchPostEffect(() => {
.title {
flex-shrink: 0;
height: calc(var(--vp-nav-height) - 1px);
transition: background-color 0.5s;
transition: background-color var(--t-color);
}
@media (min-width: 960px) {
@ -166,7 +168,8 @@ watchPostEffect(() => {
align-items: center;
justify-content: flex-end;
height: calc(var(--vp-nav-height) - 1px);
transition: background-color 0.5s;
transition: var(--t-color);
transition-property: background-color;
}
@media (min-width: 960px) {
@ -193,6 +196,7 @@ watchPostEffect(() => {
margin-left: 8px;
content: "";
background-color: var(--vp-c-divider);
transition: background-color var(--t-color);
}
.menu + .appearance::before,
@ -212,17 +216,11 @@ watchPostEffect(() => {
.navbar-wrapper.has-sidebar .curtain {
position: absolute;
right: 0;
bottom: -31px;
bottom: 0;
width: calc(100% - var(--vp-sidebar-width));
height: 32px;
}
.navbar-wrapper.has-sidebar .curtain::before {
display: block;
width: 100%;
height: 32px;
content: "";
background: linear-gradient(var(--vp-c-bg), transparent 70%);
height: 0;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
}

1
theme/src/client/components/Nav/NavBarExtra.vue
View File

@ -73,6 +73,7 @@ const hasExtraContent = computed(
font-weight: 700;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
.item.appearance,

4
theme/src/client/components/Nav/NavBarHamburger.vue
View File

@ -55,7 +55,7 @@ defineEmits<(e: 'click') => void>()
background-color: var(--vp-c-text-1);
transition:
top 0.25s,
background-color 0.5s,
background-color var(--t-color),
transform 0.25s;
}
@ -116,7 +116,7 @@ defineEmits<(e: 'click') => void>()
background-color: var(--vp-c-text-2);
transition:
top 0.25s,
background-color 0.25s,
background-color var(--t-color),
transform 0.25s;
}
</style>

2
theme/src/client/components/Nav/NavBarMenuLink.vue
View File

@ -37,7 +37,7 @@ const page = usePageData()
font-weight: 500;
line-height: var(--vp-nav-height);
color: var(--vp-c-text-1);
transition: color 0.25s;
transition: color var(--t-color);
}
.navbar-menu-link.active {

2
theme/src/client/components/Nav/NavBarTitle.vue
View File

@ -34,7 +34,7 @@ const routeLocale = useRouteLocale()
font-weight: 600;
color: var(--vp-c-text-1);
border-bottom: 1px solid transparent;
transition: opacity 0.25s;
transition: opacity var(--t-color), color var(--t-color), border-bottom var(--t-color);
}
.title:hover {

1
theme/src/client/components/Nav/NavBarTranslations.vue
View File

@ -46,5 +46,6 @@ const { currentLang, localeLinks } = useLangs()
font-weight: 700;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
</style>

6
theme/src/client/components/Nav/NavScreen.vue
View File

@ -44,7 +44,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
pointer-events: auto;
background-color: var(--vp-nav-screen-bg-color);
border-top: 1px solid var(--vp-c-divider);
transition: background-color 0.5s;
transition: background-color var(--t-color), border-top var(--t-color);
}
.container {
@ -55,12 +55,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
.nav-screen.fade-enter-active,
.nav-screen.fade-leave-active {
transition: opacity 0.25s;
transition: opacity var(--t-color);
}
.nav-screen.fade-enter-active .container,
.nav-screen.fade-leave-active .container {
transition: transform 0.25s ease;
transition: transform var(--t-color);
}
.nav-screen.fade-enter-from,

4
theme/src/client/components/Nav/NavScreenMenuGroup.vue
View File

@ -63,7 +63,7 @@ function toggle() {
height: 48px;
overflow: hidden;
border-bottom: 1px solid var(--vp-c-divider);
transition: border-color 0.5s;
transition: border-color var(--t-color);
}
.nav-screen-menu-group .items {
@ -89,7 +89,7 @@ function toggle() {
font-weight: 500;
line-height: 24px;
color: var(--vp-c-text-1);
transition: color 0.25s;
transition: color var(--t-color);
}
.button:hover {

2
theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
View File

@ -30,7 +30,7 @@ const closeScreen = inject('close-screen') as () => void
font-weight: 400;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color 0.25s;
transition: color var(--t-color);
}
.nav-screen-menu-group-link:hover {

2
theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
View File

@ -35,6 +35,6 @@ defineProps<{
font-weight: 700;
line-height: 32px;
color: var(--vp-c-text-2);
transition: color 0.25s;
transition: color var(--t-color);
}
</style>

4
theme/src/client/components/Nav/NavScreenMenuLink.vue
View File

@ -28,8 +28,8 @@ const closeScreen = inject('close-screen') as () => void
color: var(--vp-c-text-1);
border-bottom: 1px solid var(--vp-c-divider);
transition:
border-color 0.25s,
color 0.25s;
border-color var(--t-color),
color var(--t-color);
}
.nav-screen-menu-link:hover {

2
theme/src/client/components/Nav/NavScreenTranslations.vue
View File

@ -51,6 +51,7 @@ function toggle() {
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
.icon {
@ -75,5 +76,6 @@ function toggle() {
font-size: 13px;
line-height: 32px;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
</style>