最初のカスタムSvelteトランジションを作成します

SvelteのTransition APIは、カスタムトランジションの作成など、DOMに入るまたは離れるコンポーネントをアニメーション化する強力な方法を提供します。デフォルトでCSSアニメーションを活用すると、最適なパフォーマンスが保証されます。基本的な構文は簡単です：<element transition:transitionfunction=""></element> 。また、一方通行の遷移には、またはin out指令を使用することもできます。

Svelteのsvelte/transition Packageは、カスタムコードを作成せずに多様なアニメーション効果を使用するためにsvelte/easingを使用して、7つの事前に構築されたトランジション関数を簡単にカスタマイズできます。これらを試して、可能性を把握します。

スベルトの紹介が必要ですか？包括的な概要を利用できます。

カスタムSVELTE遷移を作成します

事前に構築されたオプションを超えたより細かい制御のために、Svelteは特定の規則の対象となるカスタムトランジション関数を定義できます。文書化されているように、API構造は次のとおりです。

 transition =（node：htmlelement、params：any）=> {
  遅延？：番号、
  期間？：番号、
  緩和？:（ T：number）=> number、
  css？：（t：number、u：number）=> string、
  tick？:（ t：number、u：number）=> void
}

遷移関数はDOMノードを受信し、アニメーションパラメーターを使用してオブジェクトを返します。重要なことに、 cssまたはtick機能が含まれます。

css関数は、アニメーションを定義するCSS文字列（たとえば、変換または不透明な変更）を返します。 tick機能は完全なJavaScriptコントロールを提供しますが、CSSアニメーションをバイパスするため、パフォーマンスコストがあります。

cssとtick両方がパラメーターt （エントリで0.00〜1.00、出口で1.00〜0.00）とu （1 t ）を使用します。たとえば、 transform: scale(${t})エントリで0から1までスムーズにスケールし、出口で逆転します。

説明するためにカスタムトランジションを構築しましょう。

あなたの最初のカスタムSvelteトランジション

Svelte #ifブロックを使用して要素のDOMの存在を制御するための簡単なトグルから始めます（覚えておいてください、遷移はDOMエントリ/出口でのみ発生することを忘れないでください）。

<script>
  let showing = true;
</script>

<label for="showing">
  表示
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if shoping}
  <h1>こんにちはカスタムトランジション！</h1>
{/もし}

チェックボックスの切り替えは、スタークの外観/消失を示しています。次に、カスタムトランジション関数を追加しましょう。

<script>
  let showing = true;
  function whoosh(node) {
    console.log(node);
  }
</script>

<label for="showing">
  表示
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if shoping}
  <h1 transition:whoosh="">こんにちはカスタムトランジション！</h1>
{/もし}

トグリングは、要素をコンソールにログに記録し、接続を確認します。これをアニメーションで強化します。スケーリングのためのcss関数を作成しましょう。

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t) => `transform: scale(${t})`
    }
  }
  let showing = true;
</script>

<label for="showing">
  表示
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if shoping}
  <h1 transition:swoop="">こんにちはカスタムトランジション！</h1>
{/もし}

要素は今や拡大しますが、突然です。スムーズなアニメーションにtを使用する：

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t) => `transform: scale(${t})`
    }
  }
  let showing = true;
</script>

<label for="showing">
  表示
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if shoping}
  <h1 transition:swoop="">こんにちはカスタムトランジション！</h1>
{/もし}

「急降下」効果については、横からアニメーション化してtranslateXを追加しましょう。

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)`
    }
  }
  let showing = true;
</script>

<label for="showing">
  表示
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if shoping}
  <h1 transition:swoop="">こんにちはカスタムトランジション！</h1>
{/もし}

ここでは、 u （t of t of tの逆）がtranslateXを制御し、スムーズな動きを確保します。

最後に、緩和機能を追加しましょう。

<script>
  import { elasticOut } from 'svelte/easing';

  function swoop() {
    return {
      duration: 1000,
      easing: elasticOut,
      css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)`
    }
  }
  let showing = true;
</script>

<label for="showing">
  表示
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if shoping}
  <h1 transition:swoop="">こんにちはカスタムトランジション！</h1>
{/もし}

結論

これで、カスタムSvelte Transitionを作成しました！これは単なる出発点です。より高度な手法については、ドキュメントとチュートリアルを調べてください。 tとuの相互作用を理解することは、動的なアニメーションを作成するための鍵です。

以上が最初のカスタムSvelteトランジションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。