wire:transition

Laravel Livewire Documentation Reference

Since Magewire is heavily inspired by Laravel Livewire, many concepts are either identical or very similar. To avoid duplicating documentation, this page only covers Magewire-specific and platform-specific details. For all general concepts and in-depth explanations, you can refer to the corresponding Laravel Livewire documentation.

Livewire Reference

wire:transition applies Alpine transitions when Magewire adds or removes an element during DOM morphing:

<button type="button" wire:click="toggleDetails">
    <?= $escaper->escapeHtml(__('Toggle details')) ?>
</button>

<?php if ($magewire->showDetails): ?>
    <div wire:transition>
        <?= $escaper->escapeHtml($magewire->details) ?>
    </div>
<?php endif ?>

It also works alongside wire:show, where the element stays in the DOM and its visibility changes. Transition modifiers are Alpine modifiers; make sure the CSS classes or utility styles they rely on are present in the storefront build.

Use transitions for presentation only. The server-rendered condition remains the source of truth for whether content exists after a component update.