カスタムトランジション関数を作成する
カスタムトランジションからCSSまたはtick関数を返し、DOMへの追加や削除をアニメーション化します。
「カスタムトランジション関数を作成する」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
カスタムトランジション
組み込みの機能だけでなく、完全にカスタムのトランジション関数も作成できます。
関数シグネチャ
トランジション関数は(node, params)を受け取り、オプションオブジェクトを返します。
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}トランジションを使う
任意の要素でtransition:spinを使って適用します。
CSS関数
css(t, u)関数を返します。tは0から1へ、uは1から0へ変化します。
JS関数（tick）
CSSではアニメーションできない値には、代わりにtick関数を返します。
tick: (t) => node.textContent = Math.floor(t * 100) + "%";CSSとtickの使い分け
CSSのほうが高速です（GPUアクセラレーションを利用します）。CSSで表現できない変更に限ってtickを使用してください。
イージング
関数内でイージングを適用するか、パラメータとして受け取ります。
遅延と期間
オプションオブジェクトでdelayとdurationを返します。
再利用可能なライブラリ
デザインシステム用のトランジションモジュールを作成してください。
方向の認識
フレームワークはenter時に関数を呼び出し、exit時には反対方向を使用します。
in/outと組み合わせる
in:とout:を使うと、enterとexitにそれぞれ別のカスタム関数を使用できます。
簡単な確認
トランジションのcss関数は何を受け取りますか。
まとめ
関数から{ duration, css }または{ duration, tick }を返して、カスタムトランジションを定義します。
よくある質問
「カスタムトランジション関数を作成する」レッスンは無料ですか？
はい。「カスタムトランジション関数を作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「カスタムトランジション関数を作成する」で何を学びますか？
カスタムトランジションからCSSまたはtick関数を返し、DOMへの追加や削除をアニメーション化します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「カスタムトランジション関数を作成する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。