Route

Props

is-back?: boolean
Use the returning version of the transition.

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

FluxRouteTransition.vue

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

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

    const visible = ref(true);

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