1  <script lang="ts">
 2    import { fly } from 'svelte/transition';
 3    import { cubicOut } from 'svelte/easing';
 4  
 5    // Propiedades para personalizar la transición
 6    export let duration = 300;
 7    export let delay = 0;
 8    export let y = 20; // Distancia de desplazamiento vertical
 9    export let x = 0; // Distancia de desplazamiento horizontal
10    export let opacity = 0; // Opacidad inicial
11    export let key: any = undefined; // Clave para controlar cuándo reiniciar la animación
12  </script>
13  
14  {#key key}
15    <div 
16      in:fly={{ y, x, duration, delay, easing: cubicOut, opacity }}
17      out:fly={{ y: -5, duration: 250, easing: cubicOut, opacity }} 
18      class="page-transition"
19    >
20      <slot />
21    </div>
22  {/key}
23  
24  <style>
25    .page-transition {
26      width: 100%;
27      height: 100%;
28      display: contents;
29    }
30  </style>