@i-is-as-i-does/vue-3-slide-fade

Vue 3 Slide Fade

Quick and dirty fork of Craig Riley's vue3-slide-up-down
Added optional fade in / fade out support

Regarding transitions, you might also take a look at 'Vâlvă'
You'll find a Vue 3 component in 'src/vue'

Usage

The component takes 8 props:

name	type	required	description	default
v-model*	boolean	yes	Whether to show the component or not	N/A
fade	boolean	no	Animate opacity or not	false
duration	number	no	How long the animation will be in ms	400
slideTiming	string	no	CSS transition-timing-function applied to height	"ease-in-out"
fadeTiming	string	no	CSS transition-timing-function applied to opacity	"ease-in-out"
tag	string	no	The HTML tag to use for the wrapper element	"div"
responsive	boolean	no	Animate height when contents are changed	false

• or modelValue if a method is required

<div class="MyContent">
  <h1>Always show this</h1>
  <ul>
<li v-for="(item, index) in list" :key="index">
  <slide-fade :modelValue="isActive(index)" :fade="true">
    Only show this if "isActive(index)" returns true
  </slide-fade>
<li>
  </ul>
</div>

The component emits five Vue events:

• open-start
• open-end
• close-start
• close-end
• layout-shift

<slide-fade @close-end="() => console.log('done closing!')" />