docs: update readme, add useSwitchTransition doc, add more examples

README.md

@@ -16,20 +16,41 @@
 
 <p align="center">
   <a href="https://tqgdj.csb.app/">
-    <img src="./example.gif" width="400" alt="example">
+    <img src="./example.gif" width="300" alt="example">
   </a>
   <br>
   <a href="https://tqgdj.csb.app/">See Example</a> |
   <a href="https://codesandbox.io/s/transition-hook-example-tqgdj">See Example in Codesandbox</a>
 </p>
+<p align="center">
+  <a href="https://o3f41.csb.app/basic">
+    <img src="./gifs/basic.gif" height="150" alt="example">
+  </a>
+  <a href="https://o3f41.csb.app/emoji-switch-transition">
+    <img src="./gifs/emoji-switch-transition.gif" height="150" alt="example">
+  </a>
+</p>
+<p align="center">
+  <a href="https://o3f41.csb.app/basic-switch-transition">
+    <img src="./gifs/basic-switch-transition.gif" height="200" alt="example">
+  </a>
+  <a href="https://o3f41.csb.app/transition-with-key">
+    <img src="./gifs/transition-with-key.gif" height="200" alt="example">
+  </a>
+</p>
+<p align="center">
+  <a href="https://codesandbox.io/s/transition-hook-examples-o3f41">See More Examples in Codesandbox</a>
+</p>
 <br>
 
 - [Installation](#installation)
 - [Usage](#usage)
   - [useTransition](#usetransition)
+  - [useSwitchTransition](#useswitchtransition)
   - [Transition](#transition)
 - [API Reference](#api-reference)
   - [useTransition(state, timeout)](#usetransitionstate-timeout)
+  - [useSwitchTransition(state, timeout, mode)](#useswitchtransitionstate-timeout-mode)
   - [Transition](#transition-1)
 - [License](#license)
 
@@ -51,7 +72,7 @@ npm install transition-hook --save
 
 ### useTransition
 
-This hook transform a boolean state into transition stage('from' | 'enter' | 'leave'), and unmount the component after timeout.
+This hook transforms a boolean state into transition stage('from' | 'enter' | 'leave'), and unmount the component after timeout.
 
 ```jsx
 const [onOff, setOnOff] = useState(true)
@@ -70,6 +91,30 @@ return <div>
 </div>
 ```
 
+### useSwitchTransition
+
+This hook transforms when the state changes.
+
+```jsx
+const [count, setCount] = useState(0)
+const transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)
+
+return <div>
+  <button onClick={()=>setCount(count+1)}>add</button>
+  {transition((state, stage)=>(
+    <p style={{
+      transition: '.3s',
+      opacity: stage === 'enter' ? 1 : 0,
+      transform: {
+        from: 'translateX(-100%)',
+        enter: 'translateX(0%)',
+        leave: 'translateX(100%)',
+      }[stage]
+    }}>{state}</p>
+  ))}
+</div>
+```
+
 ### Transition
 
 If you prefer FaCC pattern usage, there it is!
@@ -112,6 +157,18 @@ return <div>
 | `stage`       | Stage: `from` \| `enter` \| `leave` | Use three different stage to perform your animation |
 | `shouldMount` | `boolean`                           | Whether the component should be mounted             |
 
+### useSwitchTransition(state, timeout, mode)
+
+```js
+  const transition = useSwitchTransition(onOff, 300, default)
+```
+
+| Parameters | Type                               | Description                                                   |
+| :--------- | :--------------------------------- | :------------------------------------------------------------ |
+| `state`    | `any`                              | **Required**. Your state, which triggers animation            |
+| `timeout`  | `number`                           | **Required**. How long before the animation ends and unmounts |
+| `mode`     | `default` \| `out-in` \| `int-out` | **Optional**. Default to `default` mode                       |
+
 ### Transition
 
 ```jsx