Vue 3 Smooth Fade

Vue 3 plugin for smooth hiding and showing content

Demo

Installation

npm i vue-smooth-fade

Usage

Inside vue components use:

<script setup>
    import { SmoothFade } from 'vue-smooth-fade'
    import { ref } from 'vue'
    
    const show = ref(false)
</script>

<template>
    <SmoothFade v-model="show">
        <div>
            ........
        </div>
    </SmoothFade>
    
    <a href="#" @click.prevent="show = !show">Toggle</a>
</template>

Props

Attribute	Type	Default	Description
duration	Number	700	show and hide duration
easing	String	ease-in-out	easing
overflow	Boolean	false	Set overflow:hidden to parent element

GitHub

https://github.com/tvbird/vue-smooth-fade