跳转至

x-transition

Alpine 提供了一个强大的内置过渡工具。通过几个 x-transition 指令，你可以在显示或隐藏元素时创建平滑的过渡效果。

Alpine 中有两种主要方式来处理过渡：

过渡辅助符

使用 Alpine 实现过渡的最简单方法是向带有 x-show 的元素添加 x-transition。例如：

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <div x-show="open" x-transition>
        Hello 👋
    </div>
</div>
Hello 👋

如你所见，默认情况下，x-transition 应用了适当的默认过渡效果，使显示的元素淡出和缩放。

你可以通过附加到 x-transition 的修饰符来覆盖这些默认值。让我们来看看这些修饰符。

自定义持续时间

默认情况下，进入时的持续时间设置为 150 毫秒，离开时设置为 75 毫秒。

你可以使用 .duration 修饰符为过渡配置所需的持续时间：

<div ... x-transition.duration.500ms>

上面的 <div> 将在进入时过渡 500 毫秒，在离开时过渡 500 毫秒。

如果你希望分别为进入和离开自定义持续时间，可以这样做：

<div ...
    x-transition:enter.duration.500ms
    x-transition:leave.duration.400ms
>

尽管上述代码片段中没有包含，但如果没有父元素定义 x-data，则无法使用 x-transition。→ 阅读更多关于 x-data

自定义延迟

你可以使用 .delay 修饰符来延迟过渡，如下所示：

<div ... x-transition.delay.50ms>

上面的示例将延迟元素的进入和离开过渡 50 毫秒。

自定义透明度

默认情况下，Alpine 的 x-transition 同时应用缩放和透明度过渡来实现"淡入淡出"效果。

如果你希望仅应用透明度过渡（无缩放），你可以这样做：

<div ... x-transition.opacity>

自定义缩放

与 .opacity 修饰符类似，你可以配置 x-transition 仅进行缩放（而不进行透明度过渡），如下所示：

<div ... x-transition.scale>

.scale 修饰符还提供了配置其缩放值及其原点值的能力：

<div ... x-transition.scale.80>

上面的代码片段将以 80% 的比例缩放元素。

同样，你可以分别为进入和离开过渡自定义这些值：

<div ...
    x-transition:enter.scale.80
    x-transition:leave.scale.90
>

要自定义缩放过渡的原点，可以使用 .origin 修饰符：

<div ... x-transition.scale.origin.top>

现在，缩放将以元素的顶部为原点应用，而不是默认的中心。

你可能已经猜到了，此自定义的可能值有：top、bottom、left 和 right。

如果你愿意，还可以组合两个原点值。例如，如果你希望缩放的原点为"右上角"，你可以使用 .origin.top.right 作为修饰符。

应用 CSS 类

为了直接控制过渡的具体细节，你可以在过渡的不同阶段应用 CSS 类。

以下示例使用了 TailwindCSS 工具类。

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
    >Hello 👋</div>
</div>
Hello 👋
指令 描述
:enter 在整个进入阶段应用。
:enter-start 在元素插入之前添加，在元素插入一帧后移除。
:enter-end 在元素插入一帧后添加（与 enter-start 移除同时进行），在过渡/动画完成时移除。
:leave 在整个离开阶段应用。
:leave-start 在离开过渡触发时立即添加，在一帧后移除。
:leave-end 在离开过渡触发一帧后添加（与 leave-start 移除同时进行），在过渡/动画完成时移除。