d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-06 15:10:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

加入transition过度动画

Browse Source
This commit is contained in:
tangly1024
2023-07-05 21:52:31 +08:00
parent 7c89871d98
commit 378a22a6c8
24 changed files with 262 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
themes/hexo/components/HeaderArticle.js
View File

@@ -21,18 +21,10 @@ export default function HeaderArticle({ post, siteInfo }) {
return (
<div
id="header"
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10"
style={{ backgroundImage: headerImage }}
>
<header id='article-header-cover'
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<div className='mt-10'>

40
themes/hexo/components/InfoCard.js
View File

@@ -3,22 +3,30 @@ import { useRouter } from 'next/router'
import Card from './Card'
import SocialButton from './SocialButton'
import MenuGroupCard from './MenuGroupCard'
export function InfoCard (props) {
/**
* 社交信息卡
* @param {*} props
* @returns
*/
export function InfoCard(props) {
const { className, siteInfo } = props
const router = useRouter()
return <Card className={className}>
<div
className='justify-center items-center flex py-6 dark:text-gray-100 transform duration-200 cursor-pointer'
onClick={() => {
router.push('/')
}}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
</div>
<div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='text-sm text-center'>{BLOG.BIO}</div>
<MenuGroupCard {...props}/>
<SocialButton />
</Card>
return (
<Card className={className}>
<div
className='justify-center items-center flex py-6 dark:text-gray-100 transform duration-200 cursor-pointer'
onClick={() => {
router.push('/')
}}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
</div>
<div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='text-sm text-center'>{BLOG.BIO}</div>
<MenuGroupCard {...props} />
<SocialButton />
</Card>
)
}

2
themes/hexo/components/MenuItemDrop.js
View File

@@ -29,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map((sLink, index) => {
return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-2'>
return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>

35
themes/hexo/index.js
View File

@@ -5,7 +5,6 @@ import { useEffect, useRef } from 'react'
import Footer from './components/Footer'
import SideRight from './components/SideRight'
import TopNav from './components/TopNav'
import LoadingCover from './components/LoadingCover'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import { isBrowser, loadExternalResource } from '@/lib/utils'
@@ -32,6 +31,7 @@ import ShareBar from '@/components/ShareBar'
import TagItemMini from './components/TagItemMini'
import Link from 'next/link'
import SlotBar from './components/SlotBar'
import { Transition } from '@headlessui/react'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -57,16 +57,41 @@ const LayoutBase = props => {
<TopNav {...props} />
{/* 顶部嵌入 */}
{headerSlot}
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-16"
unmount={false}
>
{headerSlot}
</Transition>
{/* 主区块 */}
<main id="wrapper" className={`${CONFIG_HEXO.HOME_BANNER_ENABLE ? '' : 'pt-16'} bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}>
<div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<div className={`${className || ''} w-full max-w-4xl h-full `}>
{/* 主区上部嵌入 */}
{slotTop}
{onLoading ? <LoadingCover /> : children}
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 主区上部嵌入 */}
{slotTop}
{children}
</Transition>
</div>
{/* 右侧栏 */}