diff --git a/src/hooks/useListTransition.tsx b/src/hooks/useListTransition.tsx index c188269..a178932 100644 --- a/src/hooks/useListTransition.tsx +++ b/src/hooks/useListTransition.tsx @@ -75,33 +75,37 @@ export function useListTransition(list: Array, options?: ListTransit } // 2 enter those new items immediatly + const fromItems = listState.filter(item => item.status === 'from') if ( newItemsWithIndex.length === 0 - && listState.some(item => item.status === 'from') + && fromItems.length > 0 ) { setAnimationFrameTimeout(() => { setListState(prev => - prev.map(item => { - if (entered && item.status === 'from') { - setAnimationFrameTimeout(() => { - setListState(prev => - prev.map(_item => - _item.key === item.key && _item.status === 'entering' - ? { ..._item, ...getState(STATUS.entered) } - : item, - ), - ) - }, enterTimeout) - } - return ({ - ...item, - ...(item.status === 'from' ? getState(STATUS.entering) : {}), - }) - }), + prev.map(item => ({ + ...item, + ...(item.status === 'from' ? getState(STATUS.entering) : {}), + })), ) }) } + if (entered && fromItems.length > 0) { + setAnimationFrameTimeout(() => { + setListState(prev => { + return prev.map(item => + ( + fromItems.some(fromItem => fromItem.key === item.key) + && item.status === 'entering' + ) + ? { ...item, ...getState(STATUS.entered) } + : item, + ) + }, + ) + }, enterTimeout) + } + // 3 leave items from list state const subtractItemStates = listState.filter( itemState => diff --git a/src/viewTransition.ts b/src/viewTransition.ts index 8a46bf0..e738188 100644 --- a/src/viewTransition.ts +++ b/src/viewTransition.ts @@ -3,6 +3,12 @@ import { flushSync } from 'react-dom' const isClient = typeof window !== 'undefined' const isSupportViewTransition = isClient && 'startViewTransition' in document +const noop = (fn: any) => fn() + +export function viewTransition() { + +} + export function startViewTransition(fn: () => void) { if (isSupportViewTransition) { // @ts-expect-error startViewTransition is not in the type definition