Livewire v3 wire:transition

基本的な使い方Basic usage

Livewire でのコンテンツの表示/非表示は、@if のような Blade の条件付きディレクティブを使用するのと同じくらい簡単です。ユーザーエクスペリエンスを向上させるために、Livewire は wire:transition ディレクティブを提供し、条件付き要素をスムーズにページに出し入れすることができます。Showing or hiding content in Livewire is as simple as using one of Blade's conditional directives like @if. To enhance this experience for your users, Livewire provides a wire:transition directive that allows you to transition conditional elements smoothly in and out of the page.

例えば、以下はコメントの表示/非表示を切り替えることができる ShowPost コンポーネントです。For example, below is a ShowPost component with the ability to toggle viewing comments on and off:

use App\Models\Post;

class ShowPost extends Component
{
    public Post $post;

    public $showComments = false;
}

<div>
    <!-- ... -->

    <button wire:click="$set('showComments', true)">コメントを表示</button>

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

wire:transition が投稿のコメントを含む <div> に追加されているため、「コメントを表示」ボタンが押されると、$showComments が true に設定され、コメントは突然表示されるのではなく、ページに「フェードイン」されます。Because wire:transition has been added to the <div> containing the post's comments, when the "Show comments" button is pressed, $showComments will be set to true and the comments will "fade" onto the page instead of abruptly appearing.

制限事項Limitations

現在、wire:transition は、@if のような Blade の条件付きディレクティブ内の単一の要素でのみサポートされています。兄弟要素のリストで使用した場合、期待どおりに動作しません。例えば、以下は正しく動作しません。Currently, wire:transition is only supported on a single element inside a Blade conditional like @if. It will not work as expected when used in a list of sibling elements. For example, the following will NOT work properly:

<!-- 警告: 以下は正しく動作しないコードです -->
<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 で動的なリストをトランジションさせる方法はありません。If one of the above comment <li> elements were to get removed, you would expect Livewire to transition it out. However, because of hurdles with Livewire's underlying "morph" mechanism, this will not be the case. There is currently no way to transition dynamic lists in Livewire using wire:transition.

デフォルトのトランジションスタイルDefault transition style

デフォルトでは、Livewire は wire:transition を持つ要素に opacity と scale の両方の CSS トランジションを適用します。以下は視覚的なプレビューです。By default, Livewire applies both an opacity and a scale CSS transition to elements with wire:transition. Here's a visual preview:

上記のトランジションは、デフォルトでトランジションに以下の値を使用します。The above transition uses the following values for transitioning by default:

トランジションのカスタマイズCustomizing transitions

Livewire がトランジション時に内部で使用する CSS をカスタマイズするには、利用可能な修飾子の任意の組み合わせを使用できます。To customize the CSS Livewire internally uses when transitioning, you can use any combination of the available modifiers:

以下は、これらのカスタマイズをより視覚化するのに役立つ可能性のあるさまざまなトランジションの組み合わせのリストです。Below is a list of various transition combinations that may help to better visualize these customizations:

フェードのみのトランジションFade-only transition

デフォルトでは、Livewire はトランジション時に要素をフェードインおよびスケールインします。.opacity 修飾子を追加することで、スケーリングを無効にしてフェードのみにすることができます。これは、scale を追加することが理にかなわないフルページのオーバーレイなどをトランジションする場合に役立ちます。By default, Livewire both fades and scales the element when transitioning. You can disable scaling and only fade by adding the .opacity modifier. This is useful for things like transitioning a full-page overlay, where adding a scale doesn't make sense.

<div wire:transition.opacity>

フェードアウトトランジションFade-out transition

一般的なトランジション手法は、トランジションイン時に要素をすぐに表示し、トランジションアウト時にその opacity をフェードすることです。ほとんどのネイティブ MacOS ドロップダウンとメニューでこの効果に気づくでしょう。したがって、ドロップダウン、ポップオーバー、およびメニューに web 上で一般的に適用されます。A common transition technique is to show an element immediately when transitioning in, and fade its opacity when transitioning out. You'll notice this effect on most native MacOS dropdowns and menus. Therefore it's commonly applied on the web to dropdowns, popovers, and menus.

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

Origin-top トランジションOrigin-top transition

Livewire を使用してドロップダウンメニューなどの要素をトランジションさせる場合、中心（Livewire のデフォルト）からではなく、メニューの上部からスケールインするのが理にかなっています。これにより、メニューは視覚的にそれをトリガーした要素に固定されているように感じます。When using Livewire to transition an element such as a dropdown menu, it makes sense to scale in from the top of the menu as the origin, rather than center (Livewire's default). This way the menu feels visually anchored to the element that triggered it.

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

lightbulb Tip: Livewire は内部で Alpine トランジションを使用します 要素に wire:transition を使用すると、Livewire は内部で Alpine の x-transition ディレクティブを適用します。したがって、通常 x-transition で使用するほとんど、またはすべての構文を使用できます。すべての機能については、Alpine のトランジションに関するドキュメント を参照してください。[!tip] Livewire uses Alpine transitions behind the scenes When using wire:transition on an element, Livewire is internally applying Alpine's x-transition directive. Therefore you can use most if not all syntaxes you would normally use with x-transition. Check out Alpine's transition documentation[https://alpinejs.dev/directives/transition] for all its capabilities.