transition:fadeとtransition:fly
{#if}で制御する要素に、組み込みのfadeおよびflyトランジションを適用します。
「transition:fadeとtransition:fly」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
組み込みトランジション
Svelte には svelte/transition のトランジションとして、fade、fly、slide、scale、blur、draw が組み込まれています。
トランジションをインポートする
必要なものをインポートします。
import { fade, fly } from "svelte/transition";transition: を付ける
{#if} によって制御される要素に transition: を付けて適用します。
{#if visible}
<p transition:fade>Hello</p>
{/if}Fly トランジション
fly トランジションは、座標のオフセット位置から本来の位置へ要素を移動させます。
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}パラメータオブジェクト
x、y、duration、delay、easing などのオプションを渡します。
トリガーが発生するタイミング
トランジションは、{#if}、{#each}、{#await} ブロック内の要素がマウントまたはアンマウントされるときに実行されます。
トランジションを組み合わせる
1つのディレクティブにつき、1つのトランジションを適用します。非対称にするには in: と out: を使用してください。
滑らかな UX
トランジションを使うと、キーフレームを手作業で記述しなくても UI を洗練された印象にできます。
パフォーマンス
組み込みトランジションは、可能な場合に CSS を使用して GPU アクセラレーションを活用します。
モーションの軽減
トランジションを条件付きで適用し、prefers-reduced-motion を尊重してください。
イージング
svelte/easing からイージング関数を渡すと、より凝った動きを作れます。
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>確認問題
トランジションはどのタイミングで実行されますか？
復習
svelte/transition からインポートし、transition: を付け、パラメータオブジェクトで動作を制御します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「transition:fadeとtransition:fly」レッスンは無料ですか？
はい。「transition:fadeとtransition:fly」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「transition:fadeとtransition:fly」で何を学びますか？
{#if}で制御する要素に、組み込みのfadeおよびflyトランジションを適用します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「transition:fadeとtransition:fly」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- transition:fadeとtransition:fly
- トランジションのパラメーター：duration、delay、easing
- 非対称トランジションのin:とout:
- SVGパスのtransition:draw