Vue 3 Smooth Fade

Vue 3 plugin for smooth hiding and showing content

Demo

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