Window

A

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

FluxWindowTransition.vue

<template>
    <Preview :class="$style.windowTransitionPreview">
        <FluxWindowTransition :is-back="visible">
            <FluxPane v-if="visible">A</FluxPane>
            <FluxPane v-else>B</FluxPane>
        </FluxWindowTransition>
    </Preview>
</template>

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

    const visible = ref(true);

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

<style
    lang="scss"
    module>
    .windowTransitionPreview {
        overflow: clip;

        :local(.pane) {
            display: flex;
            height: 150px;
            width: 150px;
            align-items: center;
            justify-content: center;
            color: var(--foreground-secondary);
            font-size: 42px;
            font-weight: 700;
        }
    }
</style>