非対称トランジションのin:とout:
要素の入場と退場に異なるトランジションを指定します。
「非対称トランジションのin:とout:」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
非対称にする理由
要素が入るときと離れるときで、異なるアニメーションを使いたい場合があります。
in: ディレクティブ
要素が挿入されるときだけトランジションを適用します。
<p in:fly={{ y: 50 }}>Enter</p>out: ディレクティブ
要素が削除されるときだけトランジションを適用します。
<p out:fade>Leave</p>両方を組み合わせる
1つの要素に両方のディレクティブを使うと、入場と退場のアニメーションを完全にカスタマイズできます。
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>異なる関数
in と out のトランジションには、まったく異なる関数（fly と fade など）を指定できます。
異なるパラメータ
方向ごとに異なる duration、delay、easing を渡せます。
#if ブロックで使う
通常のトランジションと同じように、要素はリアクティブに作成または削除される必要があります。
transition: と in:/out: を併用しない
対称な動きには transition: を、非対称な動きには in:/out: を選んでください。併用すると競合します。
実例
トーストを上から飛び込ませ、その場でフェードアウトさせることができます。
<div in:fly={{ y: -50 }} out:fade>{message}</div>パフォーマンス
各トランジションは CPU コストを消費します。大きなリストでは控えめに使用してください。
復習パターン
非対称なトランジションは、UI を手早く洗練させる方法です。入場は印象的に、退場は素早く感じられます。
確認問題
in: と out: の違いは何ですか？
復習
入場には in:、退場には out: を使います。組み合わせると、洗練された非対称トランジションになります。
よくある質問
「非対称トランジションのin:とout:」レッスンは無料ですか？
はい。「非対称トランジションのin:とout:」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「非対称トランジションのin:とout:」で何を学びますか？
要素の入場と退場に異なるトランジションを指定します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「非対称トランジションのin:とout:」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- transition:fadeとtransition:fly
- トランジションのパラメーター：duration、delay、easing
- 非対称トランジションのin:とout:
- SVGパスのtransition:draw