S
SolidJS•3y ago
Bersaelor

<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
BersaelorOP•3y 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
Delvis
Delvis•3y 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

Did you find this page helpful?