Svelte · Middle · Question 63 of 75

How does `in:`/`out:` differ from `transition:`?

✓Correct answer: transition: is bidirectional and can reverse mid-way; separate in: and out: are independent and don't reverse
2in: and out: work only on components
3There is no difference

Explanation

If an element is toggled while its outro is playing, transition: reverses smoothly, whereas in: starts its own animation alongside.

Further reading

Test yourself

Take the Svelte · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.