トランジションのパラメーター：node、duration、delay
柔軟性を高めるため、トランジション関数でnodeとパラメーターオブジェクトを受け取ります。
「トランジションのパラメーター：node、duration、delay」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
関数シグネチャ
カスタムトランジションは、柔軟性を持たせるために(node, params)を受け取ります。
nodeを読み取る
nodeを使って、現在のサイズや位置などのプロパティを計算します。
const rect = node.getBoundingClientRect();パラメータを渡す
ディレクティブによって利用側からparamsが渡されます。
<p transition:spin={{ duration: 800 }}>...デフォルト値
paramsがない場合は、関数内でデフォルト値を使用してください。
function spin(node, { duration = 600 } = {}) { ... }リアクティブなパラメータ
トランジションの実行中にパラメータが変わっても、トランジションは再実行されません。次回のマウントで新しい値が使われます。
期間の計算
タイプライター効果の単語の長さのように、データからdurationを計算できます。
イージングパラメータ
利用側でカーブをカスタマイズできるように、イージングパラメータを受け取ります。
遅延パラメータ
インデックスから計算した遅延を渡して、表示を段階的にずらします。
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}CSS文字列のヒント
組み合わせ可能なtransformを返し、topやleftのようなレイアウトを頻繁に再計算させるプロパティは避けてください。
パフォーマンス
滑らかなアニメーションを実現するため、transformとopacityを使用してください。
テスト
ブラウザーのDevToolsで、トランジション中に計算済みスタイルを確認してください。
簡単な確認
paramsオブジェクトには何が含まれますか。
まとめ
柔軟なトランジションにするため、paramsを受け取って使用します。値がない場合に備えてデフォルト値を用意してください。
よくある質問
「トランジションのパラメーター：node、duration、delay」レッスンは無料ですか？
はい。「トランジションのパラメーター：node、duration、delay」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「トランジションのパラメーター：node、duration、delay」で何を学びますか？
柔軟性を高めるため、トランジション関数でnodeとパラメーターオブジェクトを受け取ります。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「トランジションのパラメーター：node、duration、delay」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- カスタムトランジション関数を作成する
- トランジションのパラメーター：node、duration、delay
- モーフィングトランジションを作成する
- CSSトランジションとJavaScriptトランジション