Overlay

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

FluxOverlayTransition.vue

<template>
    <Preview :class="$style.overlayPreview">
        <div :class="$style.overlayShade"/>

        <FluxOverlayTransition>
            <div
                v-if="visible"
                :class="[$style.overlay, $style.isCurrent]">
                <FluxPane/>
            </div>
        </FluxOverlayTransition>
    </Preview>
</template>

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

    const visible = ref(true);

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

<style
    lang="scss"
    module>
    .overlayPreview {
        overflow: hidden;
    }

    .overlayPreview :local(.overlay) {
        position: absolute;
        height: unset;
        width: unset;
        border-radius: var(--radius);

        :local(.pane) {
            height: 150px;
            width: 75%;
        }
    }

    .isCurrent,
    .overlayTransitionLeaveActive {
        pointer-events: auto;
    }

    .overlayShade {
        position: absolute;
        height: unset;
        width: unset;
        inset: 0;

        &:not(:has(+ .overlay:not(.overlayTransitionLeaveActive))) {
            opacity: 0;
        }
    }
</style>