过渡动画

This commit is contained in:
tangly1024.com
2023-06-07 18:43:54 +08:00
parent 45c07959bf
commit 1f3ac7f5ae
2 changed files with 15 additions and 27 deletions

View File

@@ -1,25 +1,11 @@
/**
* 主题文件加载出之前的占位符
* 异步文件加载过程中的占位符
* @returns
*/
const Loading = (props) => {
// const { theme, setOnReading } = useGlobal()
// console.log('开启遮罩')
// setOnReading(true)
// useEffect(() => {
// // 返回一个函数,在组件销毁时设置 onReading 为 false
// return () => {
// setTimeout(() => {
// console.log('关闭遮罩')
// setOnReading(false)
// }, 500)
// }
// })
return <div className="w-screen h-screen flex justify-center items-center bg-black">
<i className='mr-5 fas fa-spinner animate-spin text-2xl' />
return <div id="loading-bg" className="-z-10 w-screen h-screen flex justify-center items-center fixed left-0 top-0">
<i className='fas fa-spinner animate-spin text-3xl' />
</div>
}
export default Loading

View File

@@ -2,6 +2,7 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import BLOG from '@/blog.config'
import CommonScript from '@/components/CommonScript'
import Loading from '@/components/Loading'
class MyDocument extends Document {
static async getInitialProps(ctx) {
@@ -11,17 +12,18 @@ class MyDocument extends Document {
render() {
return (
<Html lang={BLOG.LANG}>
<Head>
<link rel='icon' href='/favicon.ico' />
<CommonScript />
</Head>
<Html lang={BLOG.LANG}>
<Head>
<link rel='icon' href='/favicon.ico' />
<CommonScript />
</Head>
<body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
<Main />
<NextScript />
</body>
</Html>
<body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
<Main />
<NextScript />
</body>
<Loading />
</Html>
)
}
}