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

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

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

制作自定義苗條過(guò)渡

對(duì)于超出預(yù)構(gòu)建選項(xiàng)的精細(xì)控制，Svelte允許定義自定義過(guò)渡功能，但要遵守特定的約定。如有記錄，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
}

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

css函數(shù)返回定義動(dòng)畫(huà)的CSS字符串（例如，變換或不透明度更改）。 tick功能提供了完整的JavaScript控件，但是以性能成本繞過(guò)CSS動(dòng)畫(huà)時(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è)自定義過(guò)渡以說(shuō)明。

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

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

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

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

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

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

<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="">你好自定義過(guò)渡！</h1>
{/如果}

現(xiàn)在切換將元素記錄到控制臺(tái)，確認(rèn)連接。我們將通過(guò)動(dòng)畫(huà)來(lái)增強(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="">你好自定義過(guò)渡！</h1>
{/如果}

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

<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="">你好自定義過(guò)渡！</h1>
{/如果}

對(duì)于“打動(dòng)”效果，讓我們添加translateX ，從側(cè)面進(jìn)行動(dòng)畫(huà)：

<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="">你好自定義過(guò)渡！</h1>
{/如果}

在這里， u （ t的倒數(shù)）控制著translateX ，以確保流暢的運(yùn)動(dòng)。

最后，讓我們添加一個(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="">你好自定義過(guò)渡！</h1>
{/如果}

結(jié)論

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

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