Overlay - Animaciones

Demo en vivo

Observa la animacion de entrada y salida de cada tipo de overlay.

Sistema de animacion

Las animaciones se definen en OverlayDefaults::typeAnimations(). Cada tipo tiene un objeto enter y leave.

Estructura de animacion

// Cada tipo define:
[
    'enter' => [
        'from'     => '...',  // Clases CSS al inicio de la transicion
        'to'       => '...',  // Clases CSS al final de la transicion
        'duration' => '...',  // Clases de timing/easing
    ],
    'leave' => [
        'from'     => '...',
        'to'       => '...',
        'duration' => '...',
    ],
]

// Cada tipo define:
[
    'enter' => [
        'from'     => '...',  // Clases CSS al inicio de la transicion
        'to'       => '...',  // Clases CSS al final de la transicion
        'duration' => '...',  // Clases de timing/easing
    ],
    'leave' => [
        'from'     => '...',
        'to'       => '...',
        'duration' => '...',
    ],
]

Mapeo a directivas Alpine

x-transition:enter="{{ $anim['enter']['duration'] }}"
 x-transition:enter-start="{{ $anim['enter']['from'] }}"
 x-transition:enter-end="{{ $anim['enter']['to'] }}"
 x-transition:leave="{{ $anim['leave']['duration'] }}"
 x-transition:leave-start="{{ $anim['leave']['from'] }}"
 x-transition:leave-end="{{ $anim['leave']['to'] }}"

x-transition:enter="{{ $anim['enter']['duration'] }}"
 x-transition:enter-start="{{ $anim['enter']['from'] }}"
 x-transition:enter-end="{{ $anim['enter']['to'] }}"
 x-transition:leave="{{ $anim['leave']['duration'] }}"
 x-transition:leave-start="{{ $anim['leave']['from'] }}"
 x-transition:leave-end="{{ $anim['leave']['to'] }}"

Modal

Scale up con ligero translate vertical en mobile, scale puro en desktop.

Clases de animacion — Modal

Enter:
  from:     opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95
  to:       opacity-100 translate-y-0 sm:scale-100
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-y-0 sm:scale-100
  to:       opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95
  duration: ease-in duration-200

Enter:
  from:     opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95
  to:       opacity-100 translate-y-0 sm:scale-100
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-y-0 sm:scale-100
  to:       opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95
  duration: ease-in duration-200

Drawer (derecha)

Se desliza desde el borde derecho. Posicion por defecto del drawer.

Clases de animacion — Drawer (right)

Enter:
  from:     opacity-0 translate-x-full
  to:       opacity-100 translate-x-0
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-x-0
  to:       opacity-0 translate-x-full
  duration: ease-in duration-200

Enter:
  from:     opacity-0 translate-x-full
  to:       opacity-100 translate-x-0
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-x-0
  to:       opacity-0 translate-x-full
  duration: ease-in duration-200

Drawer (izquierda)

Se desliza desde el borde izquierdo. Se ajusta automaticamente cuando la posicion es left.

Clases de animacion — Drawer (left)

Enter:
  from:     opacity-0 -translate-x-full
  to:       opacity-100 translate-x-0
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-x-0
  to:       opacity-0 -translate-x-full
  duration: ease-in duration-200

Enter:
  from:     opacity-0 -translate-x-full
  to:       opacity-100 translate-x-0
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-x-0
  to:       opacity-0 -translate-x-full
  duration: ease-in duration-200

Confirm

Animacion scale rapida, sin translate.

Clases de animacion — Confirm

Enter:
  from:     opacity-0 scale-95
  to:       opacity-100 scale-100
  duration: ease-out duration-200

Leave:
  from:     opacity-100 scale-100
  to:       opacity-0 scale-95
  duration: ease-in duration-150

Enter:
  from:     opacity-0 scale-95
  to:       opacity-100 scale-100
  duration: ease-out duration-200

Leave:
  from:     opacity-100 scale-100
  to:       opacity-0 scale-95
  duration: ease-in duration-150

Bottom Sheet

Se desliza desde la parte inferior del viewport.

Clases de animacion — Bottom Sheet

Enter:
  from:     opacity-0 translate-y-full
  to:       opacity-100 translate-y-0
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-y-0
  to:       opacity-0 translate-y-full
  duration: ease-in duration-200

Enter:
  from:     opacity-0 translate-y-full
  to:       opacity-100 translate-y-0
  duration: ease-out duration-300

Leave:
  from:     opacity-100 translate-y-0
  to:       opacity-0 translate-y-full
  duration: ease-in duration-200

Fullscreen

Fade simple sin transformaciones.

Clases de animacion — Fullscreen

Enter:
  from:     opacity-0
  to:       opacity-100
  duration: ease-out duration-200

Leave:
  from:     opacity-100
  to:       opacity-0
  duration: ease-in duration-150

Enter:
  from:     opacity-0
  to:       opacity-100
  duration: ease-out duration-200

Leave:
  from:     opacity-100
  to:       opacity-0
  duration: ease-in duration-150

Animacion del backdrop

El backdrop tiene su propia animacion fija, separada del panel del overlay. Es la misma para todos los tipos.

Clases de animacion — Backdrop

Enter: ease-out duration-300, opacity 0 -> 100
Leave: ease-in duration-200, opacity 100 -> 0

Enter: ease-out duration-300, opacity 0 -> 100
Leave: ease-in duration-200, opacity 100 -> 0

Animaciones por posicion

El metodo OverlayDefaults::animation() acepta type y position para ajustar la animacion automaticamente.

Metodo animation()

public static function animation(string $type, string $position = 'center'): array

public static function animation(string $type, string $position = 'center'): array

Actualmente, la sensibilidad a la posicion aplica a drawers:

position: 'right' (default): usa translate-x-full (desliza desde la derecha).

position: 'left': usa -translate-x-full (desliza desde la izquierda).

Todos los demas tipos ignoran el parametro de posicion para animaciones.

Animaciones personalizadas

Sobreescribe la animacion al momento de abrir via overlayAttributes.

Animacion personalizada via overlayAttributes

<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.notification',
    overlayAttributes: {
        animation: {
            enter: {
                from: 'opacity-0 -translate-y-full',
                to: 'opacity-100 translate-y-0',
                duration: 'ease-out duration-500'
            },
            leave: {
                from: 'opacity-100 translate-y-0',
                to: 'opacity-0 -translate-y-full',
                duration: 'ease-in duration-300'
            }
        }
    }
})">
    Deslizar desde arriba
</button>

<button x-on:click="$dispatch('kore:open', {
    name: 'overlays.notification',
    overlayAttributes: {
        animation: {
            enter: {
                from: 'opacity-0 -translate-y-full',
                to: 'opacity-100 translate-y-0',
                duration: 'ease-out duration-500'
            },
            leave: {
                from: 'opacity-100 translate-y-0',
                to: 'opacity-0 -translate-y-full',
                duration: 'ease-in duration-300'
            }
        }
    }
})">
    Deslizar desde arriba
</button>

Cuando sobreescribes type o position via overlayAttributes, la animacion se recalcula automaticamente. Solo necesitas proveer un override explicito de animation si quieres algo completamente personalizado.