Transition

#[Transition] 属性为操作方法配置视图过渡行为，允许你设置过渡类型或完全跳过过渡。

基本用法

将 #[Transition] 属性应用到应触发特定过渡动画的操作方法上：

<?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>

过渡类型可在 CSS 中使用 :active-view-transition-type() 选择器定位：

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; }
}

跳过过渡

使用 skip: true 可为特定操作禁用过渡：

#[Transition(skip: true)]
public function reset()
{
    $this->step = 1;
}

这对「重置」或「取消」等应立即更新、无需动画的操作很有用。

参数

参数	类型	说明
type	string	过渡类型名称（例如 'forward'、'backward'）
skip	bool	设为 true 可为该操作禁用过渡

替代方式

使用 transition()

对于依赖运行时逻辑的动态过渡类型，请改用 transition() 方法：

public function goToStep($step)
{
    $this->transition(type: $step > $this->step ? 'forward' : 'backward');

    $this->step = $step;
}

使用 skipTransition()

你也可以命令式地跳过过渡：

public function reset()
{
    $this->skipTransition();

    $this->step = 1;
}

了解更多

关于视图过渡的更多信息，请参阅 wire:transition 文档。