42 lines
862 B
Vue
42 lines
862 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
visible: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Transition>
|
|
<div v-if="visible" class="tw:h-full tw:overflow-hidden tw:isolate" style="background-color: var(--main-background-color);">
|
|
<div class="tw:h-full">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@property --screen-transition-duration {
|
|
syntax: "<time>";
|
|
inherits: false;
|
|
initial-value: 0.5s;
|
|
}
|
|
|
|
/* this placeholder is needed, because Vue.js can not figure out transition duration based on nested styles */
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity var(--screen-transition-duration) linear;
|
|
}
|
|
|
|
.v-enter-active>div,
|
|
.v-leave-active>div {
|
|
transition: transform var(--screen-transition-duration) ease-out;
|
|
}
|
|
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
.v-leave-to>div {
|
|
transform: scale(130%);
|
|
}
|
|
</style>
|