Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

wire:transition and View Transitions API in Livewire v4

Native browser transitions replace Alpine.js in v4.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Basic Usage
  2. Removed Modifiers
  3. Custom CSS

Livewire v4 uses native View Transitions API.

Basic Usage

blade
<div wire:transition>
    Content that fades
</div>

Removed Modifiers

blade
<!-- No longer work -->
wire:transition.opacity
wire:transition.scale
wire:transition.duration.500ms

Custom CSS

css
::view-transition-old(modal) {
    animation: fade-out 0.3s;
}
::view-transition-new(modal) {
    animation: fade-in 0.3s;
}
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read