<template>
  <Transition name="fade-in-out" :style="{ transitionDuration: duration }" :appear="appear">
    <slot></slot>
  </Transition>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  duration: {
    type: String,
    default: '0.3s',
  },
  appear: Boolean,
});
</script>

<style lang="scss">
.fade-in-out-enter-active,
.fade-in-out-leave-active {
  transition: opacity ease;
}

.fade-in-out-enter-from,
.fade-in-out-leave-to {
  opacity: 0;
}
</style>
