SolidJS•12mo ago

<Show> transition when opening/closing

If I use <Show> to show or hide some details, i.e.

  const [isExpanded, setIsExpanded] = createSignal(false);

<Stack>
  // content thats always there
  <Show when={isExpanded()}>
  
  </Shop>
</Stack>

  const [isExpanded, setIsExpanded] = createSignal(false);

<Stack>
  // content thats always there
  <Show when={isExpanded()}>
  
  </Shop>
</Stack>

how do I make the <div> height animate when users expand/collapse?

2 Replies

Bersaelor•12mo ago

I tried

<Stack sx={{ transition: 'all 0.2s ease-in-out' }}>

<Stack sx={{ transition: 'all 0.2s ease-in-out' }}>

but when I set setIsExpanded it still just opens/closes appruptly

Massukka•12mo ago

I think divs inside Show are removed and added from dom , so you might need to use something like motion one or solidjs transition group

Gaming

Programming

<Show> transition when opening/closing