<template>
  <transition
    name="step"
    mode="out-in"
    appear
  >
    <div :key="step" class="step-content">
      <slot />
    </div>
  </transition>
</template>

<script setup>
defineProps({
  step: {
    type: Number,
    required: true
  }
})
</script>

<style scoped>
.step-content {
  min-height: 400px;
}

.step-enter-active,
.step-leave-active {
  transition: all 0.5s ease;
}

.step-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.step-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.step-enter-to,
.step-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style>
