Fade

Props

mode?: in-out | out-in
Defines how transitions are coordinated between entering and leaving elements.
Default: out-in

Slots

default
The element that should be animated.

Snippet

FluxFadeTransition.vue

<template>
    <Preview>
        <FluxFadeTransition>
            <FluxPane
                v-if="visible"
                style="height: 150px; width: 75%;"/>
        </FluxFadeTransition>
    </Preview>
</template>

<script
    lang="ts"
    setup>
    import { useInterval } from '@basmilius/common';
    import { FluxFadeTransition, FluxPane } from '@flux-ui/components';
    import { ref } from 'vue';

    const visible = ref(true);

    useInterval(1500, () => {
        visible.value = !visible.value;
    });
</script>