li_chx
/
lichx-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ 扬掉旧的掉帧动画系统 严肃使用新动画系统

This commit is contained in:
li-chx 2025-11-05 23:23:07 +08:00
parent 6c963257cf
commit 9043cf53fd
18 changed files with 138 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/ArticleDescriptionCards.vue
View File

@ -143,7 +143,7 @@ function updateRule() {
<template>
<div>
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5">
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
<div class="text-2xl ml-1 flex items-center">
<Icon class="mr-2" name="material-symbols:category"/>
类型
@ -162,7 +162,7 @@ function updateRule() {
</div>
</div>
</div>
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5 mt-4">
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-4">
<div class="text-2xl ml-1 flex items-center">
<Icon class="mr-2" name="material-symbols:book"/>
分类
@ -185,7 +185,7 @@ function updateRule() {
<div>{{ count }}</div>
</div>
</div>
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5 mt-4">
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-4">
<div class="text-2xl ml-1 flex items-center">
<Icon class="mr-2" name="material-symbols:bookmarks"/>
标签
@ -194,7 +194,7 @@ function updateRule() {
<div class="flex flex-wrap">
<div
v-for="([name,count],index) of tags" :key="index"
class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-all duration-300"
class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-shadow duration-300"
:class="{'text-old-neutral-400': !tagsEnableStatus[index]}"
@click="updateTagEnableStatus(index)"
>

2
components/PersonalCard.vue
View File

@ -4,7 +4,7 @@
<template>
<div>
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5">
<div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
Author: Lichx
<div>
Contact me:

4
components/ReadonlyMdEditor.vue
View File

@ -22,14 +22,14 @@ onMounted(() => {
</script>
<template>
<div class="pt-0 bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500">
<div class="pt-0 bg-old-neutral-200 dark:bg-old-neutral-800">
<MdPreview
v-if="mounted"
:key="editorId + '-' + colorMode"
:editor-id="editorId"
:theme="colorMode"
:model-value="eraseHeaderMarkdown"
class="transition-all duration-500 max-w-full"
class="max-w-full"
/>
</div>
</template>

45
layouts/UserLayout.vue
View File

@ -69,55 +69,38 @@ onMounted(() => {
</script>
<template>
<div class="bg-old-neutral-50 dark:bg-[#0b0d0d] w-full min-h-[100vh] h-full transition-colors duration-500">
<div class="bg-old-neutral-50 dark:bg-[#0b0d0d] w-full min-h-[100vh] h-full">
<UApp>
<div
:class=" (collapsed ? 'h-[20vh]': 'h-[40vh]')"
class="flex flex-col relative transition-all duration-500 ease-in-out" @mouseenter="() => {
class="flex flex-col relative transition-[height] duration-500 max-h-80">
<!-- header -->
<div
v-if="mounted"
@mouseenter="() => {
if(scrollY === 0) {
collapsed = false;
}
}"
@mouseleave="collapsed = true">
<!-- header -->
<div v-if="mounted">
<Transition
enter-active-class="transition-opacity duration-500 ease-in-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-500 ease-in-out"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
}" @mouseleave="collapsed = true">
<div
v-if="colorMode === 'light'"
class="flex h-full w-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top ">
class="flex w-full h-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top ">
<slot name="header"/>
</div>
<div
v-else
class="flex h-full w-full absolute bg-[url('/anime-8788959.jpg')] bg-cover bg-center">
class="flex w-full h-full max-h-80 absolute bg-[url('/anime-8788959.webp')] bg-cover bg-center">
<slot name="header"/>
</div>
</Transition>
<!-- header picture -->
<Transition
enter-active-class="transition-opacity duration-500 ease-in-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-500 ease-in-out"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="isScrollDown">
<div
v-if="colorMode === 'light'"
class="opacity-80 max-h-[48px] flex w-full h-full fixed bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top"/>
class="opacity-80 max-h-[48px] flex w-full h-full fixed bg-[url('/79d52228c770808810a310115567e6790380823a.webp')] bg-cover bg-top"/>
<div
v-else
class="opacity-20 max-h-[48px] flex w-full h-full fixed bg-[url('/anime-8788959.jpg')] bg-cover bg-center"/>
class="opacity-20 max-h-[48px] flex w-full h-full fixed bg-[url('/anime-8788959.webp')] bg-cover bg-center"/>
</div>
</Transition>
</div>
<!-- navbar -->
<div
@ -127,7 +110,7 @@ onMounted(() => {
<slot name="navbarLeft" :is-scroll-down="isScrollDown"/>
</div>
<div
class="transition-all duration-500 flex 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-10/12">
class="transition-[width] duration-500 flex 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-10/12">
<UNavigationMenu v-if="mounted" :items="items" :class="colorMode" class="w-full"/>
<div v-else class="w-full h-12 animate-pulse"></div>
</div>
@ -148,10 +131,10 @@ onMounted(() => {
</div>
<!-- content -->
<div class="flex justify-center items-center duration-500 bg-white dark:bg-[#16191b] h-full">
<div class="flex justify-center items-center bg-white dark:bg-[#16191b] h-full">
<div
:class="collapsed ? 'min-h-[80vh]' : 'min-h-[60vh]'"
class="transition-all duration-500 ease-in-out 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-11/12">
class="transition-[width] duration-500 ease-in-out 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-11/12">
<slot name="content"/>
</div>
</div>

29
pages/index.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import useColorModeStore from '~/stores/colorModeStore';
import breakpointsHelper from '~/utils/BreakpointsHelper';
import ThemeChange from '~/pages/index/components/ThemeChange.vue';
const hitokoto = ref('加载中...');
@ -31,31 +31,8 @@ onMounted(async () => {
<template #navbarRight>
<div class="flex items-center h-full">
<div class="flex-1"/>
<div class="flex-1 flex items-center justify-end duration500 ease-in-out">
<Transition
mode="out-in"
enter-active-class="transition-opacity duration-300 ease-in-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-300 ease-in-out"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<Icon
v-if="useColorModeStore().colorMode === 'dark'"
key="dark"
name="material-symbols:dark-mode"
class="text-2xl cursor-pointer mr-5"
@click="() => useColorModeStore().toggleColorMode()"
/>
<Icon
v-else
key="light"
name="material-symbols:clear-day-rounded"
class="text-2xl cursor-pointer mr-5"
@click="() => useColorModeStore().toggleColorMode()"
/>
</Transition>
<div class="flex-1 flex items-center justify-end ease-in-out">
<ThemeChange />
</div>
</div>
</template>

6
pages/index/about/compoents/AuthorDescription.vue
View File

@ -11,18 +11,18 @@ onMounted(() => {
<template>
<div>
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3">
<div class="text-2xl pb-2">关于作者</div>
lichx，目前就读于武汉理工大学，技术涉猎广泛但不精，仍在持续学习中 <br/>
</div>
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3">
<div class="text-2xl pb-2">技术栈（相对熟练度）</div>
<TechStackCard
v-if="mounted" async-key="about page" :tech-stack="techStack"
:tech-stack-percent="techStackPercent" :tech-stack-icon-names="techStackIconNames"
:tech-stack-theme-colors="techStackThemeColors"/>
</div>
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3">
<div class="text-2xl pb-2">在其他渠道关注 / 联系我</div>
<a href="https://github.com/li-chx" title="github，不常用">
<icon name="mdi:github" class="inline-block w-10 h-10 mr-4"/>

2
pages/index/about/compoents/SiteDescription.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 transition-colors duration-300">
<div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
<div class="text-2xl pb-2">关于本站</div>
本站，随机存取，起这个名字纯粹是因为作者想不出来了。最后基于我对该网站的需求，决定叫随机存取<br/>
这个网站最重要的还是记录我认为有趣的 学习 / 调试 过程，便于我随时取用，所以写的时候完全就是梦到哪写到哪<br/>

4
pages/index/archive/index.vue
View File

@ -31,14 +31,14 @@ const choiceItems = ref<RadioGroupItem>([
<div>
<div class="table w-full mt-6 mb-6">
<div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
<div class="relative duration-500 transition-all xl:w-80 w-0 mr-2/3 overflow-hidden">
<div class="relative duration-500 transition-[width] xl:w-80 w-0 mr-2/3 overflow-hidden">
<div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
这里还没想好放什么
</div>
</div>
</div>
<div
class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
<URadioGroup
v-model="currentChoice" orientation="horizontal" variant="table" :items="choiceItems as any[]" size="sm"
class="mb-5"/>

2
pages/index/article/[articleID]/components/ArticleHeader.vue
View File

@ -51,7 +51,7 @@ onMounted(() => {
</script>
<template>
<div class="p-6 pb-0 light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500">
<div class="p-6 pb-0 light:bg-old-neutral-200 dark:bg-old-neutral-800">
<UCollapsible v-model:open="open" :unmount-on-hide="false" class="flex flex-col gap-2 w-full">
<div class="text-4xl flex justify-between items-center w-full">
<div class="mb-0 pb-0">

8
pages/index/article/[articleID]/index.vue
View File

@ -11,15 +11,15 @@ const editorId = 'article-previewer';
<template>
<div>
<div class="table w-full mt-6 mb-6 table-fixed">
<div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)] transition-colors duration-500">
<div class="relative duration-500 transition-all xl:w-80 w-0 mr-2/3 overflow-hidden">
<div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5 transition-colors duration-500">
<div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
<div class="relative duration-500 transition-[width] xl:w-80 w-0 mr-2/3 overflow-hidden">
<div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
<div class="text-3xl mb-2">目录</div>
<MdCatalog :editor-id="editorId" :scroll-element="'html'" class=""/>
</div>
</div>
</div>
<div class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full max-w-full">
<div class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full max-w-full">
<ArticleHeader v-if="article" class="w-full" :meta-data="toMetaDataType(article)"/>
<!-- <ArticleCard v-if="article" class=" w-full" :article="toArticleMetaDataType(article)"/>-->
<ReadonlyMdEditor :editor-id="editorId" :markdown="article?.rawbody" class="p-5 max-w-full"/>

4
pages/index/components/ArticleCard.vue
View File

@ -52,7 +52,7 @@ onMounted(() => {
</script>
<template>
<div class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64 transition-all duration-500">
<div class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64">
<div class="text-4xl">
{{ metaData?.title }}
</div>
@ -105,7 +105,7 @@ onMounted(() => {
:tech-stack-icon-names="metaData?.tech_stack_icon_names"
:tech-stack-theme-colors="metaData?.tech_stack_theme_colors"
:tech-stack-percent="metaData?.tech_stack_percent"
class="lg:w-64 w-0 transition-all duration-500"
class="lg:w-64 w-0 transition-[width] duration-500"
/>
</div>
<div v-else class="min-w-64"/>

51
pages/index/components/SimpleCard.vue
View File

@ -2,7 +2,6 @@
import { DataAnomaly, defaultMetaData } from '~/types/PostMetaData';
import type { PostMetaData } from '~/types/PostMetaData';
import useColorModeStore from '~/stores/colorModeStore';
const props = withDefaults(defineProps<{
metaData?: PostMetaData;
@ -54,55 +53,25 @@ const safeEditorId = computed(() => {
return `rambling_${encoded}`;
});
const showLightShadow = ref(false);
const showDarkShadow = ref(false);
const showShadow = ref(true);
function reverseCollapsed() {
if (collapsed.value) {
collapsed.value = false;
return;
}
const showLight = showLightShadow.value;
const showDark = showDarkShadow.value;
showLightShadow.value = false;
showDarkShadow.value = false;
collapsed.value = true;
showShadow.value = false;
setTimeout(() => {
showLightShadow.value = showLight;
showDarkShadow.value = showDark;
showShadow.value = true;
}, 500);
}
const colorModeStore = useColorModeStore();
let colorModeCallBackKey = '';
onMounted(() => {
if (colorModeStore.colorMode === 'light') {
showLightShadow.value = true;
} else {
showDarkShadow.value = true;
}
colorModeCallBackKey = colorModeStore.registerCallBack(() => {
if (colorModeStore.colorMode === 'light') {
setTimeout(() => {
showLightShadow.value = true;
}, 500);
showDarkShadow.value = false;
} else {
showLightShadow.value = false;
setTimeout(() => {
showDarkShadow.value = true;
}, 500);
}
});
});
onUnmounted(() => {
colorModeStore.unregisterCallBack(colorModeCallBackKey);
});
</script>
<template>
<div
class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64 transition-all duration-500"
class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64"
@click="reverseCollapsed">
<div class="text-4xl">
{{ (typeChinese.get(metaData?.type) || 'unknown Type') + '：' }}{{ props.metaData.title }}
@ -146,18 +115,14 @@ onUnmounted(() => {
</div>
<div
class="relative flex mt-2 justify-between overflow-hidden transition-all duration-300 ease-in-out min-h-[8.5rem]"
class="relative flex mt-2 justify-between overflow-hidden duration-300 ease-in-out min-h-[8.5rem]"
:class="{'max-h-[8.5rem]' : collapsed, 'max-h-[100vh]':!collapsed}">
<ReadonlyMdEditor
v-if="rawbody" :editor-id="safeEditorId" :markdown="rawbody!"
class="transition-all duration-500 w-full"/>
class="w-full"/>
<div
class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-old-neutral-200 to-transparent pointer-events-none transition-opacity duration-300"
:class="collapsed&&showLightShadow?'opacity-100':'opacity-0'"
/>
<div
class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-old-neutral-800 to-transparent pointer-events-none transition-opacity duration-300"
:class="collapsed&&showDarkShadow?'opacity-100':'opacity-0'"
class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-old-neutral-200 dark:from-old-neutral-800 to-transparent pointer-events-none transition-opacity duration-300"
:class="collapsed && showShadow?'opacity-100':'opacity-0'"
/>
</div>
<hr/>

78
pages/index/components/ThemeChange.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup lang="ts">
import useColorModeStore from '~/stores/colorModeStore';
const colorModeStore = useColorModeStore();
function revealToggle(e?: MouseEvent) {
if (typeof document === 'undefined' || !e || !('startViewTransition' in document)) {
// SSR 或无事件时直接切换或不支持时直接切换
colorModeStore.toggleColorMode();
return;
}
const transition = document.startViewTransition(() => {
colorModeStore.toggleColorMode();
});
transition.ready.then(() => {
// 获取鼠标的坐标
const { clientX, clientY } = e!;
// 计算最大半径
const radius = Math.hypot(
Math.max(clientX, innerWidth - clientX),
Math.max(clientY, innerHeight - clientY),
);
// 圆形动画扩散开始
document.documentElement.animate(
{
clipPath: [
`circle(0% at ${clientX}px ${clientY}px)`,
`circle(${radius}px at ${clientX}px ${clientY}px)`,
],
},
// 设置时间，已经目标伪元素
{
duration: 500,
pseudoElement: '::view-transition-new(root)',
},
);
});
}
</script>
<template>
<Transition
mode="out-in"
enter-active-class="transition-opacity duration-300 ease-in-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-300 ease-in-out"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<Icon
v-if="colorModeStore.colorMode === 'dark'"
key="dark"
name="material-symbols:dark-mode"
class="text-2xl cursor-pointer mr-5"
@click="revealToggle($event)"
/>
<Icon
v-else
key="light"
name="material-symbols:clear-day-rounded"
class="text-2xl cursor-pointer mr-5"
@click="revealToggle($event)"
/>
</Transition>
</template>
<style>
::view-transition-new(root),
::view-transition-old(root) {
animation: none;
}
</style>

6
pages/index/index.vue
View File

@ -33,7 +33,7 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
<div>
<div class="table w-full mt-6 table-fixed">
<div class="sticky top-16 float-left max-h-[calc(100vh-4rem)]">
<div class="relative duration-500 transition-all xl:w-80 w-0 overflow-hidden">
<div class="relative duration-500 transition-[width] xl:w-80 w-0 overflow-hidden">
<div class="w-80 top-0 left-0 text-gray-800 dark:text-white">
<ArticleDescriptionCards
v-if="postsMetaData"
@ -42,7 +42,7 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
</div>
</div>
</div>
<div class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full">
<div class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full">
<!-- <ArticleCard class="mb-6 w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600"/>-->
<div
v-for="post in postsMetaData" :key="post.id"
@ -64,7 +64,7 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
</div>
<div v-if="postsMetaData.length === 0" class="w-full">
<div
class="w-full light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-all duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
class="w-full light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
<div class="pt-5 text-center text-2xl">
没有找到符合条件的文章
</div>

BIN
public/79d52228c770808810a310115567e6790380823a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 MiB

BIN
public/79d52228c770808810a310115567e6790380823a.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/anime-8788959.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
public/anime-8788959.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB