wire:transition

#基本用法

在 Livewire 中显示或隐藏内容就像使用 Blade 的条件指令（如 @if）一样简单。为了增强用户的体验，Livewire 提供了 wire:transition 指令，允许您平滑地转换条件元素进出页面。

例如，下面是一个 ShowPost 组件，它可以切换显示评论的开关

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>

由于 wire:transition 已添加到包含帖子评论的 <div> 中，因此当按下“显示评论”按钮时，$showComments 将设置为 true，评论将“淡入”页面，而不是突然出现。

#限制

目前，wire:transition 仅支持在 Blade 条件（如 @if）内的单个元素上使用。在同级元素列表中使用时，它不会按预期工作。例如，以下内容将无法正常工作

<!-- Warning: The following is code that will not work propertly -->
<ul>
    @foreach ($post->comments as $comment)
        <li wire:transition wire:key="{{ $comment->id }}">{{ $comment->content }}</li>
    @endforeach
</ul>

如果上述评论 <li> 元素之一被删除，您希望 Livewire 将其转换出去。然而，由于 Livewire 底层“变形”机制的障碍，情况并非如此。目前无法使用 wire:transition 在 Livewire 中转换动态列表。

#默认过渡样式

默认情况下，Livewire 对具有 wire:transtion 的元素应用不透明度和缩放 CSS 过渡。以下是可视化预览

默认情况下，上述过渡使用以下值进行过渡

#自定义过渡

要自定义 Livewire 在过渡时内部使用的 CSS，可以使用任何可用修饰符的组合

以下是各种过渡组合的列表，可能有助于更好地可视化这些自定义

仅淡入淡出过渡

默认情况下，Livewire 在过渡时会淡入淡出并缩放元素。你可以禁用缩放，仅通过添加 .opacity 修饰符来淡入淡出。这对于诸如过渡全页覆盖层之类的操作很有用，其中添加缩放没有意义。

<div wire:transition.opacity>

淡出过渡

一种常见的过渡技巧是在过渡进入时立即显示一个元素，并在过渡退出时淡化其不透明度。你将在大多数本机 MacOS 下拉菜单和菜单上看到此效果。因此，它通常应用于 Web 上的下拉菜单、弹出窗口和菜单。

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

顶部原点过渡

当使用 Livewire 过渡元素（例如下拉菜单）时，从菜单顶部而不是中心（Livewire 的默认值）按原点进行缩放是有意义的。这样，菜单在视觉上感觉锚定在触发它的元素上。

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