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!')" />