44 lines
838 B
Vue
44 lines
838 B
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
|
|
type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
|
|
|
|
const props = defineProps({
|
|
fallback: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
appear: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
mode: {
|
|
type: String as PropType<ModeOptions>,
|
|
default: 'out-in',
|
|
},
|
|
enter: {
|
|
type: String,
|
|
default: 'animate__fadeIn',
|
|
},
|
|
leave: {
|
|
type: String,
|
|
default: 'animate__fadeOut',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ClientOnly>
|
|
<template #fallback>{{ props.fallback }}</template>
|
|
|
|
<Transition
|
|
:appear="props.appear"
|
|
:mode="props.mode"
|
|
:enter-active-class="`animate__animated ${props.enter}`"
|
|
:leave-active-class="`animate__animated ${props.leave}`"
|
|
>
|
|
<slot />
|
|
</Transition>
|
|
</ClientOnly>
|
|
</template>
|