Livewire 中文文档

主题

wire:transition ​

基本用法 ​

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

例如，以下是一个 ShowPost 组件，具有切换查看评论开关的能力：

php
use App\Models\Post;

class ShowPost extends Component
{
    public Post $post;

    public $showComments = false;
}
blade
<div>
    <!-- ... -->

    <button wire:click="$set('showComments', true)">Show comments</button>

    @if ($showComments)
        <div wire:transition> <!-- [tl! highlight] -->
            @foreach ($post->comments as $comment)
                <!-- ... -->
            @endforeach
        </div>
    @endif
</div>

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

限制 ​

目前，wire:transition 仅支持在 Blade 条件（如 @if）内的单个元素上。当用于兄弟元素列表时，它将无法按预期工作。例如，以下将无法正常工作：

blade
<!-- 警告：以下代码将无法正常工作 -->
<ul>
    @foreach ($post->comments as $comment)
        <li wire:transition wire:key="{{ $comment->id }}">{{ $comment->content }}</li>
    @endforeach
</ul>

如果上述评论 <li> 元素之一被删除，你会期望 Livewire 将其过渡出去。但是，由于 Livewire 底层"morph"机制的障碍，情况并非如此。目前没有办法使用 wire:transition 在 Livewire 中过渡动态列表。

默认过渡样式 ​

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

Preview transition in
 

上述过渡默认使用以下值进行过渡：

过渡进入过渡退出
duration: 150msduration: 75ms
opacity: [0 - 100]opacity: [100 - 0]
transform: scale([0.95 - 1])transform: scale([1 - 0.95])

自定义过渡 ​

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

修饰符描述
.in仅将元素过渡"进入"
.out仅将元素过渡"退出"
.duration.[?]ms以毫秒为单位自定义过渡持续时间
.duration.[?]s以秒为单位自定义过渡持续时间
.delay.[?]ms以毫秒为单位自定义过渡延迟
.delay.[?]s以秒为单位自定义过渡延迟
.opacity仅应用不透明度过渡
.scale仅应用缩放过渡
.origin.[top|bottom|left|right]自定义使用的缩放"原点"

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

仅淡入淡出过渡

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

html
<div wire:transition.opacity>
Preview transition in
...

淡出过渡

一种常见的过渡技术是在过渡进入时立即显示元素，并在过渡退出时淡出其不透明度。你会在大多数原生 MacOS 下拉菜单和菜单上注意到这种效果。因此，它通常应用于 Web 上的下拉菜单、弹出框和菜单。

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

从顶部原点过渡

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

html
<div wire:transition.scale.origin.top>
Preview transition in
...

Livewire 在幕后使用 Alpine 过渡

当在元素上使用 wire:transition 时，Livewire 在内部应用 Alpine 的 x-transition 指令。因此，你可以使用通常与 x-transition 一起使用的大部分（如果不是全部）语法。查看 Alpine 的过渡文档 以了解其所有功能。