Skip to the content

Lesson 15 of 21 · Motion

Transitions

transition animates a change of a style. Transition animates an element that enters or leaves. The utilities of enter are the start of the enter, and the utilities of exit are the end of the exit.The same code animates on the web and in a native window. Each animation obeys the "reduce motion" setting of the system.Your turn
  • Wrap the #if block in a Transition:
  • <Transition enter="opacity-0 translate-y-2" exit="opacity-0" ms={200}> ... </Transition>
Preview
1 error
The sandbox needs a browser.