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

perf(theme): 优化博客列表页翻页过渡

Browse Source
This commit is contained in:
pengzhanbo 2024-04-17 12:09:57 +08:00
parent 837237c118
commit 72357e9c37
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
theme/src/client/components/TransitionDrop.vue
View File

@ -11,15 +11,20 @@ const props = withDefaults(defineProps<Props>(), {
let _transition = ''
function setStyle(item: Element) {
function beforeAppear(item: Element) {
const el = item as HTMLElement
if (_transition === '') {
const value = window.getComputedStyle(el).transition
_transition = value && !value.includes('all') ? `${value}, ` : ''
}
el.style.transform = 'translateY(-20px)'
el.style.opacity = '0'
el.style.transition = `transform ${props.duration}s ease-in-out ${props.delay}s, opacity ${props.duration}s ease-in-out ${props.delay}s`
}
function setStyle(item: Element) {
const el = item as HTMLElement
if (!_transition) {
const value = typeof window !== 'undefined' && window.getComputedStyle ? window.getComputedStyle(el).transition : ''
_transition = value && !value.includes('all') ? `${value}, ` : ''
}
el.style.transition = `${_transition}transform ${props.duration}s ease-in-out ${props.delay}s, opacity ${props.duration}s ease-in-out ${props.delay}s`
}
function unsetStyle(item: Element) {
@ -35,7 +40,8 @@ function unsetStyle(item: Element) {
name="drop"
mode="out-in"
:appear="appear"
@before-appear="setStyle"
@appear="setStyle"
@before-appear="beforeAppear"
@after-appear="unsetStyle"
@enter="setStyle"
@after-enter="unsetStyle"

4
theme/src/client/components/VFooter.vue
View File

@ -47,6 +47,10 @@ onMounted(() => {
transition: all var(--t-color);
}
.footer-no-border .plume-footer {
border-top: none;
}
.plume-footer p {
color: var(--vp-c-text-2);
transition: color var(--t-color);