fix: uselisttransition entered error

docs/components/BasicUseListTransition/index.tsx

@@ -1,34 +1,48 @@
 import { useRef, useState } from 'react'
-import { useListTransition } from 'transition-hooks'
+import { getSimpleStatus, useListTransition } from 'transition-hooks'
 import { Button } from '../Button'
 
 const numbers = Array.from({ length: 5 }, (_, i) => i)
 export function BasicUseListTransition() {
   const [list, setList] = useState(numbers)
-  const idRef = useRef(numbers.at(-1)! + 1)
-  const transition = useListTransition(list)
+  const idRef = useRef(numbers.length)
+  const transition = useListTransition(list, { entered: false, timeout: 300 })
 
   return (
     <div>
-      <Button onClick={insert}>insert</Button>
-      <Button onClick={remove}>remove</Button>
+      <div style={{ display: 'flex', gap: 4 }}>
+        <Button onClick={insert}>insert</Button>
+        <Button onClick={remove}>remove</Button>
+      </div>
       <ul>
         {transition((item, { status }) => {
-          // console.log('🚀 ~ {transition ~ item:', item)
+          const simpleStatus = getSimpleStatus(status)
           return (
-            <li key={item}>{item}</li>
+            <li
+              style={{
+                opacity: simpleStatus === 'enter' ? 1 : 0,
+                transform: simpleStatus === 'enter' ? 'translateX(0)' : 'translateX(20px)',
+                transition: 'all 300ms',
+              }}
+            >
+              - {item}
+            </li>
           )
         })}
       </ul>
+      {}
     </div>
   )
   function insert() {
     const i = Math.round(Math.random() * list.length)
-    setList([...list].splice(i, 0, idRef.current++))
+    const newList = [...list]
+    newList.splice(i, 0, idRef.current++)
+    setList(newList)
   }
   function remove() {
     const i = Math.round(Math.random() * list.length - 1)
-
-    setList([...list].splice(i, 1))
+    const newList = [...list]
+    newList.splice(i, 1)
+    setList(newList)
   }
 }

src/hooks/useListTransition.tsx

@@ -41,13 +41,12 @@ export function useListTransition<Item>(list: Array<Item>, options?: { timeout:
 
       // 1 add new items into list state
       if (newItemsWithIndex.length > 0) {
-        keyRef.current++
         setListState(prevListState =>
           newItemsWithIndex.reduce(
             (prev, { item, index }, _i) =>
               insertArray(prev, index, {
                 item,
-                key: keyRef.current,
+                key: keyRef.current++,
                 ...getState(STATUS.from),
               }),
             prevListState,
@@ -67,8 +66,8 @@ export function useListTransition<Item>(list: Array<Item>, options?: { timeout:
                 setAnimationFrameTimeout(() => {
                   setListState(prev =>
                     prev.map(_item =>
-                      _item.key === item.key && _item.status === 'from'
-                        ? { ..._item, ...getState(STATUS.entering) }
+                      _item.key === item.key && _item.status === 'entering'
+                        ? { ..._item, ...getState(STATUS.entered) }
                         : item,
                     ),
                   )