The #[Transition] attribute configures view transition behavior for action methods, allowing you to set transition types or skip transitions entirely.
Apply the #[Transition] attribute to action methods that should trigger specific transition animations:
<?php
use Livewire\Attributes\Transition;
use Livewire\Component;
class Wizard extends Component
{
public $step = 1;
#[Transition(type: 'forward')] // [tl! highlight]
public function next()
{
$this->step++;
}
#[Transition(type: 'backward')] // [tl! highlight]
public function previous()
{
$this->step--;
}
}<div>
<div wire:transition="content">
Step {{ $step }}
</div>
<button wire:click="previous">Back</button>
<button wire:click="next">Next</button>
</div>The transition type can be targeted in CSS using the :active-view-transition-type() selector:
html:active-view-transition-type(forward) {
&::view-transition-old(content) {
animation: 300ms ease-out both slide-out-left;
}
&::view-transition-new(content) {
animation: 300ms ease-in both slide-in-right;
}
}
html:active-view-transition-type(backward) {
&::view-transition-old(content) {
animation: 300ms ease-out both slide-out-right;
}
&::view-transition-new(content) {
animation: 300ms ease-in both slide-in-left;
}
}
@keyframes slide-out-left {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in-right {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-out-right {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
@keyframes slide-in-left {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}Use skip: true to disable transitions for specific actions:
#[Transition(skip: true)]
public function reset()
{
$this->step = 1;
}This is useful for actions like "reset" or "cancel" that should instantly update without animation.
| Parameter | Type | Description |
|---|---|---|
type | string | The transition type name (e.g., 'forward', 'backward') |
skip | bool | Set to true to disable transitions for this action |
For dynamic transition types that depend on runtime logic, use the transition() method instead:
public function goToStep($step)
{
$this->transition(type: $step > $this->step ? 'forward' : 'backward');
$this->step = $step;
}You can also skip transitions imperatively:
public function reset()
{
$this->skipTransition();
$this->step = 1;
}For more information about view transitions, see the wire:transition documentation.