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

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

vue transition slideup slidedown fadein fadeout easein easeout

@everything-registry/sub-chunk-447 @zalastax/nolb-_i-@infinitebrahmanuniverse/nolb-_i-

1.0.0

2 years ago