0Pricing
Sveltejs Academy · レッスン

リストの並べ替えに対するanimate:flip

FLIP手法を使用して、順序が変わったときにリスト項目を滑らかにアニメーションさせます。

「リストの並べ替えに対するanimate:flip」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

animate:flip の動作

flip は、キー付き each ブロック内で要素の位置が変わったときに、要素を滑らかにアニメーションさせます。

インポート

svelte/animate からインポートします。

import { flip } from "svelte/animate";

項目に適用する

キー付き each の内部にある項目に付けます。

{#each items as item (item.id)}
  <li animate:flip>{item.name}</li>
{/each}

FLIP 手法

FLIP は First、Last、Invert、Play の略です。Svelte は差分を計算し、transform を使って滑らかにアニメーションさせます。

キー付き each が必須

このアニメーションでは、どの DOM ノードがどの項目に対応するかをキーで判断します。

パラメータ

{ duration, delay, easing } オプションをトランジションと同じように渡します。

<li animate:flip={{ duration: 300 }}>

一般的なトリガー

ドラッグ＆ドロップ、並べ替え、フィルタリング、シャッフルによる並べ替えです。

トランジションとの組み合わせ

transition: と組み合わせると、並べ替えのアニメーションに加えて、表示・非表示のアニメーションも適用できます。

パフォーマンス

CSS transformを使用するため、数百個のアイテムでも滑らかに動作します。

制限事項

異なる each ブロック間でコンテナをまたいで移動するアイテムはアニメーションできません。

モーションの低減

アクセシビリティのために、ユーザーがモーションの低減を指定している場合はアニメーションをスキップします。

確認問題

animate:flip には何が必要ですか？

まとめ

animate:flip は、FLIP手法を使用して、keyed each ブロック内のリストの並べ替えを滑らかにアニメーションします。

よくある質問

「リストの並べ替えに対するanimate:flip」レッスンは無料ですか？

はい。「リストの並べ替えに対するanimate:flip」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「リストの並べ替えに対するanimate:flip」で何を学びますか？

FLIP手法を使用して、順序が変わったときにリスト項目を滑らかにアニメーションさせます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「リストの並べ替えに対するanimate:flip」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. リストの並べ替えに対するanimate:flip
  2. spring()とtweened() Store
  3. カスタムEasing関数
  4. トランジションとアニメーションの組み合わせ
← Sveltejs Academyに戻る