0Pricing
Sveltejs Academy · レッスン

トランジションとアニメーションの組み合わせ

トランジションとアニメーションを重ね合わせ、豊かで調和したUI効果を実現します。

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

レイヤー化したモーション

transition: と animate: を組み合わせると、アイテムをフェードインさせながら滑らかに配置し直せます。

例

新しいアイテムが飛び込むように表示され、既存のアイテムが滑らかに並べ替えられるToDoリストです。

{#each todos as todo (todo.id)}
  <li in:fly={{ y: 20 }} animate:flip>{todo.text}</li>
{/each}

適用順序

Svelteは、同時に実行されるトランジションとFLIPアニメーションを適切に処理します。

競合を避ける

トランジションは要素の不透明度や位置に影響し、アニメーションは要素を移動させます。両者は独立して実行されます。

期間を合わせる

動きを調和させるため、トランジションとアニメーションには近い期間を使用します。

カスタムイージングの使用

一貫した操作感になるよう、両方に同じイージング関数を適用します。

パフォーマンスに注意

大きなリストで多数のアニメーションを同時に実行すると、負荷が高くなる場合があります。表示するアイテムを制限するか、仮想化します。

ストアとの組み合わせ

Springストアやtweenedストアを使うと、トランジションと同時に変化する数値プロパティを駆動できます。

実際の使用例

ダッシュボード、ドラッグ＆ドロップボード、並べ替え可能なギャラリーなど、時間とともにリストが変化するあらゆる場所で使用できます。

アクセシビリティ

トランジションとアニメーションの両方で、prefers-reduced-motion を一貫して尊重します。

仕上げの効果

動きを調和させると、体感的な品質が大きく向上します。手間をかける価値があります。

確認問題

transition: と animate: を同時に使用できますか？

まとめ

表示・非表示には transition:、並べ替えには animate: を重ねて使用すると、豊かで洗練されたUIになります。

よくある質問

「トランジションとアニメーションの組み合わせ」レッスンは無料ですか？

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

「トランジションとアニメーションの組み合わせ」で何を学びますか？

トランジションとアニメーションを重ね合わせ、豊かで調和したUI効果を実現します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「トランジションとアニメーションの組み合わせ」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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