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

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

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

制作自定義苗條過渡

對于超出預(yù)構(gòu)建選項(xiàng)的精細(xì)控制，Svelte允許定義自定義過渡功能，但要遵守特定的約定。如有記錄，API結(jié)構(gòu)是：

 transition =（node：htmlelement，params：any）=> {
  延遲？：數(shù)字，
  持續(xù)時(shí)間？：數(shù)字，
  放松？：（ t：number）=>數(shù)字，
  CSS？:（ T：number，u：number）=>字符串，
  tick？：（ t：number，u：number）=> void
}

過渡功能接收DOM節(jié)點(diǎn)，并帶有動畫參數(shù)返回對象。至關(guān)重要的是，它包括css或tick功能。

css函數(shù)返回定義動畫的CSS字符串（例如，變換或不透明度更改）。 tick功能提供了完整的JavaScript控件，但是以性能成本繞過CSS動畫時(shí)的性能成本。

css和tick都使用參數(shù)t （入口時(shí)為0.00至1.00，出口時(shí)1.00至0.00）和u （1- t ）。例如， transform: scale(${t})在輸入時(shí)從0到1平滑地比例。

讓我們建立一個(gè)自定義過渡以說明。

您的第一個(gè)自定義苗條過渡

我們將從一個(gè)簡單的切換開始，以使用SVELTE #if塊來控制元素的DOM的影響（請記住，僅在DOM條目/出口上發(fā)生過渡）。

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

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

{#if顯示}
  <h1>你好自定義過渡！</h1>
{/如果}

切換復(fù)選框顯示出鮮明的外觀/消失?，F(xiàn)在，讓我們添加一個(gè)自定義過渡功能：

<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>
{/如果}

現(xiàn)在切換將元素記錄到控制臺，確認(rèn)連接。我們將通過動畫來增強(qiáng)它。讓我們創(chuàng)建一個(gè)css函數(shù)以進(jìn)行縮放：

<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>
{/如果}

元素現(xiàn)在擴(kuò)展，但突然。使用t進(jìn)行平滑動畫：

<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 ，從側(cè)面進(jìn)行動畫：

<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的倒數(shù)）控制著translateX ，以確保流暢的運(yùn)動。

最后，讓我們添加一個(gè)輕松的功能：

<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>
{/如果}

結(jié)論

您現(xiàn)在創(chuàng)建了一個(gè)自定義苗條的過渡！這只是一個(gè)起點(diǎn)。探索文檔和教程以獲取更高級的技術(shù)。了解t和u的相互作用是創(chuàng)建動態(tài)動畫的關(guān)鍵。

以上是使您的第一個(gè)自定義苗條過渡的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！