wire:transition

Uso básico

Mostrar u ocultar contenido en Livewire es tan sencillo como usar una de las directivas condicionales de Blade como @if. Para mejorar esta experiencia para sus usuarios, Livewire proporciona una directiva wire:transition que le permite realizar transiciones suaves de elementos condicionales dentro y fuera de la página.

Por ejemplo, a continuación se muestra un componente ShowPost con la capacidad de activar y desactivar la visualización de comentarios:

use App\Models\Post;

class ShowPost extends Component
{
    public Post $post;

    public $showComments = false;
}

<div>
    <!-- ... -->

    <button wire:click="$set('showComments', true)">Show comments</button>

    @if ($showComments)
        <div wire:transition>
            @foreach ($post->comments as $comment)
                <!-- ... -->
            @endforeach
        </div>
    @endif
</div>

Dado que se ha añadido wire:transition al <div> que contiene los comentarios de la entrada, cuando se pulse el botón “Mostrar comentarios”, $showComments se establecerá en true y los comentarios se “fundirán” en la página en lugar de aparecer abruptamente.

Limitaciones

Actualmente, wire:transition sólo es compatible con un único elemento dentro de un condicional Blade como @if. No funcionará como se espera cuando se utilice en una lista de elementos hermanos. Por ejemplo, lo siguiente NO funcionará correctamente:

<!-- Advertencia: El siguiente código no funcionará correctamente -->
<ul>
    @foreach ($post->comments as $comment)
        <li wire:transition wire:key="{{ $comment->id }}">{{ $comment->content }}</li>
    @endforeach
</ul>

Si se eliminara uno de los elementos <li> de comentario anteriores, cabría esperar que Livewire lo eliminara. Sin embargo, debido a problemas con el mecanismo «morph» subyacente de Livewire, este no será el caso. Actualmente no hay forma de hacer transiciones de listas dinámicas en Livewire usando wire:transition.

Estilo de transición por defecto

Por defecto, Livewire aplica tanto una opacidad como una escala de transición CSS a los elementos con wire:transition.

Personalización de las transiciones

Para personalizar el CSS que Livewire utiliza internamente en las transiciones, puede utilizar cualquier combinación de los modificadores disponibles:

Modificador	Descripción
`in`	Sólo transición del elemento “in”
`out`	Sólo transición del elemento “out”
`.duration.[?]ms`	Personalizar la duración de la transición en milisegundos
`.duration.[?]s`	Personalizar la duración de la transición en segundos
`.delay.[?]ms`	Personalizar el retardo de la transición en milisegundos
`.delay.[?]s`	Personalizar el retardo de la transición en segundos
`.opacity`	Aplicar sólo la transición de opacidad
`.scale`	Aplicar sólo la transición de escala
`.origin.[top bottom left right]`	Personalizar el “origen” de escala utilizado. (Elige uno de los que hay entre [])

A continuación se muestra una lista de varias combinaciones de transiciones que pueden ayudar a visualizar mejor estas personalizaciones:

Transición sólo fundido

Por defecto, Livewire desvanece y escala el elemento durante la transición. Puede desactivar el escalado y sólo el desvanecimiento añadiendo el modificador .opacity. Esto es útil para cosas como la transición de una superposición de página completa, donde añadir una escala no tiene sentido.

<div wire:transition.opacity>

Transición de desvanecimiento

Una técnica de transición habitual consiste en mostrar un elemento inmediatamente al entrar en él y atenuar su opacidad al salir. Notarás este efecto en la mayoría de los desplegables y menús nativos de MacOS. Por lo tanto, se aplica comúnmente en la web a los desplegables, popovers y menús.

<div wire:transition.out.opacity.duration.200ms>

Transición origen-parte superior

Cuando se utiliza Livewire para transicionar un elemento como un menú desplegable, tiene sentido escalar desde la parte superior del menú como origen, en lugar de centrarlo (el valor por defecto de Livewire). De esta forma, el menú se siente visualmente anclado al elemento que lo activó.

<div wire:transition.scale.origin.top>