{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Need to customize animation.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Animate\">Animate <a class=\"header-anchor scroll-count-item\" href=\"#Animate\" data-scroll-id=\"Animate\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>animation</td>\n<td>The animation className</td>\n<td>string | Partial&lt;Record&lt;&apos;appear&apos; | &apos;enter&apos; | &apos;leave&apos;, string&gt;&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>animationAppear</td>\n<td>Whether to execute animation on the first mount</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>component</td>\n<td>The tag of the wrapper</td>\n<td>React.ElementType</td>\n<td>&apos;div&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>singleMode</td>\n<td>Whether to only have a single child</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeAppear</td>\n<td>Callback fired before the &quot;entering&quot; status of the first mount is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onAppear</td>\n<td>Callback fired after the &quot;entering&quot; status of the first mount is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterAppear</td>\n<td>Callback fired after the &quot;entered&quot; status of the first mount is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeEnter</td>\n<td>Callback fired before the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEnter</td>\n<td>Callback fired after the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterEnter</td>\n<td>Callback fired after the &quot;entered&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeLeave</td>\n<td>Callback fired before the &quot;exiting&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onLeave</td>\n<td>Callback fired after the leave stage</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterLeave</td>\n<td>Callback fired after the leave stage</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Animate Expand\">Animate.Expand <a class=\"header-anchor scroll-count-item\" href=\"#Animate Expand\" data-scroll-id=\"Animate Expand\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>animation</td>\n<td>The animation className</td>\n<td>string | Partial&lt;Record&lt;&apos;appear&apos; | &apos;enter&apos; | &apos;leave&apos;, string&gt;&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeEnter</td>\n<td>Callback fired before the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEnter</td>\n<td>Callback fired after the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterEnter</td>\n<td>Callback fired after the &quot;entered&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeLeave</td>\n<td>Callback fired before the &quot;exiting&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onLeave</td>\n<td>Callback fired after the &quot;exiting&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterLeave</td>\n<td>Callback fired after the &quot;exited&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Animate Overlay Animate\">Animate.OverlayAnimate <a class=\"header-anchor scroll-count-item\" href=\"#Animate Overlay Animate\" data-scroll-id=\"Animate Overlay Animate\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>animation</td>\n<td>The animation className</td>\n<td>string | false | Record&lt;&apos;in&apos; | &apos;out&apos;, string&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Show the component; triggers the enter or exit states</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>The element to be wrapped</td>\n<td>ReactElement</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>timeout</td>\n<td>The duration of the transition.</td>\n<td>| number<br> | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined }</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>The style of the child element</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>mountOnEnter</td>\n<td>&quot;lazy mount&quot; the component on the first <code>in={true}</code></td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>unmountOnExit</td>\n<td>&quot;lazy unmount&quot; the component on the first <code>in={false}</code></td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onEnter</td>\n<td>Callback fired before the &quot;entering&quot; status is applied.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>isAppearing</em>: IsAppearing</td>\n<td>(node: HTMLElement, isAppearing: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEntering</td>\n<td>Callback fired after the &quot;entering&quot; status is applied.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>isAppearing</em>: IsAppearing</td>\n<td>(node: HTMLElement, isAppearing: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEntered</td>\n<td>Callback fired after the &quot;entered&quot; status is applied.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>isAppearing</em>: IsAppearing</td>\n<td>(node: HTMLElement, isAppearing: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExit</td>\n<td>Callback fired before the &quot;exiting&quot; status is applied.</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExiting</td>\n<td>Callback fired after the &quot;exiting&quot; status is applied.</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExited</td>\n<td>Callback fired after the &quot;exited&quot; status is applied.</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>appear</td>\n<td>Transition on the first mount.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>enter</td>\n<td>Enable or disable enter transitions.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>exit</td>\n<td>Enable or disable exit transitions.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Animation List\">Animation List <a class=\"header-anchor scroll-count-item\" href=\"#Animation List\" data-scroll-id=\"Animation List\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th>In</th>\n<th>Out</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>fadeIn</td>\n<td>fadeOut</td>\n</tr>\n<tr>\n<td>fadeInDown</td>\n<td>fadeOutDown</td>\n</tr>\n<tr>\n<td>fadeInLeft</td>\n<td>fadeOutLeft</td>\n</tr>\n<tr>\n<td>fadeInRight</td>\n<td>fadeOutRight</td>\n</tr>\n<tr>\n<td>fadeInUp</td>\n<td>fadeOutUp</td>\n</tr>\n<tr>\n<td>slideInDown</td>\n<td>slideOutUp</td>\n</tr>\n<tr>\n<td>slideInLeft</td>\n<td>slideOutLeft</td>\n</tr>\n<tr>\n<td>slideInRight</td>\n<td>slideOutRight</td>\n</tr>\n<tr>\n<td>slideInUp</td>\n<td>slideOutDown</td>\n</tr>\n<tr>\n<td>zoomIn</td>\n<td>zoomOut</td>\n</tr>\n<tr>\n<td>expandInDown</td>\n<td>expandOutUp</td>\n</tr>\n<tr>\n<td>expandInUp</td>\n<td>expandOutDown</td>\n</tr>\n<tr>\n<td>pulse</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}