useTransition()

The useTransition() hook provides you a headless system that will manage the transition state for you. This makes building your own transition easier.

Alternatively, you checkout the example page built with useTransition() at examples/Custom transition

Usage

1. Wrapping content with <TransitionLayout> in app/layout.tsx is required when using the useTransition hooks. Reference: <TransitionLayout>.

2. Replace <Link> with <TransitionLink> is also required when using the useTransition hooks. Reference: <TransitionLink>.

3. Import from library

Loading...

4. Calling useTransition hooks

Loading...

Animate using inline style

Loading...

Animate using tailwindcss

Loading...

Customising transition duration

Default transition duration is set to 300ms. Transition duration can be customised by adding a delay key to the useTransition hook.

Loading...