d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-19 23:16:48 +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

2
themes/example/components/BlogPostCard.js
View File

@@ -4,7 +4,7 @@ import Link from 'next/link'
import TwikooCommentCount from '@/components/TwikooCommentCount'
const BlogPostCard = ({ post }) => {
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER && post?.pageCoverThumbnail
return <article className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>

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

@@ -26,7 +26,7 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-10'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map((sLink, index) => {
return <li key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
return <li key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 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>

28
themes/example/index.js
View File

@@ -21,11 +21,11 @@ import ShareBar from '@/components/ShareBar'
import SearchInput from './components/SearchInput'
import Mark from 'mark.js'
import { isBrowser } from '@/lib/utils'
import LoadingCover from './components/LoadingCover'
import BlogListGroupByDate from './components/BlogListGroupByDate'
import CategoryItem from './components/CategoryItem'
import TagItem from './components/TagItem'
import { useRouter } from 'next/router'
import { Transition } from '@headlessui/react'
/**
* 基础布局框架
@@ -38,6 +38,14 @@ const LayoutBase = props => {
const { children, meta, slotTop } = props
const { onLoading } = useGlobal()
// 增加一个状态以触发 Transition 组件的动画
// const [showTransition, setShowTransition] = useState(true)
// useEffect(() => {
// // 当 location 或 children 发生变化时，触发动画
// setShowTransition(false)
// setTimeout(() => setShowTransition(true), 5)
// }, [onLoading])
return (
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
{/* 网页SEO信息 */}
@@ -59,9 +67,21 @@ const LayoutBase = props => {
{/* 内容 */}
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '>
{/* 嵌入模块 */}
{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>
{/* 侧边栏 */}