使您的第一個自定義苗條過渡

Svelte的Transition API提供了一種有力的方法，可以使組件進入或離開DOM，包括創建自定義過渡。默認利用CSS動畫可確保最佳性能。基本語法很簡單：<element transition:transitionfunction=""></element> 。您也可以in指令或out指令用於單向過渡。

Svelte的svelte/transition軟件包提供了七個預構建的過渡功能，可以在不編寫自定義代碼的情況下，易於自定義，以提供svelte/easing ，以供各種動畫效果。嘗試這些可能性。

需要巧妙的介紹嗎？我們有一個全面的概述。

製作自定義苗條過渡

對於超出預構建選項的精細控制，Svelte允許定義自定義過渡功能，但要遵守特定的約定。如有記錄，API結構是：

 transition =（node：htmlelement，params：any）=> {
  延遲？：數字，
  持續時間？：數字，
  放鬆？：（ t：number）=>數字，
  CSS？:（ T：number，u：number）=>字符串，
  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 #if塊來控制元素的DOM的影響（請記住，僅在DOM條目/出口上發生過渡）。

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

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

{#if顯示}
  <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顯示}
  <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顯示}
  <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顯示}
  <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顯示}
  <h1 transition:swoop="">你好自定義過渡！</h1>
{/如果}

在這裡， u （ 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顯示}
  <h1 transition:swoop="">你好自定義過渡！</h1>
{/如果}

結論

您現在創建了一個自定義苗條的過渡！這只是一個起點。探索文檔和教程以獲取更高級的技術。了解t和u的相互作用是創建動態動畫的關鍵。

以上是使您的第一個自定義苗條過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！