loading code fetching the highlighted snippet
FIG-001/ LAYOUTID
close into the thumbnail.
The card is the present + child child of AnimatePresence. When it closes it is relegated: the thumbnail takes its layoutId back and grows out of it, while the card stays mounted and fades out until that animation ends.
- Each thumbnail and the card share a
layoutId: opening the card makes it the lead, so it grows out of its thumbnail. - Closing relegates the card. The thumbnail takes over and grows out of it, and the
card crossfades out. It stays mounted until the shared animation ends, with no
exitprop, as in Motion. - A snippet reads live state, so the card reads
shown, the colour latched while it was open, instead ofopen, which isnullwhile it closes.
category · layoutid
sheet · sheet 01 / 01
⟳ to re-run