Menjadikan Peralihan Svelte Khas pertama anda

API Peralihan Svelte menawarkan cara yang kuat untuk menghidupkan komponen memasuki atau meninggalkan DOM, termasuk mewujudkan peralihan tersuai. Memanfaatkan animasi CSS secara lalai memastikan prestasi yang optimum. Sintaks asas adalah mudah:<element transition:transitionfunction=""></element> . Anda juga boleh menggunakan arahan in atau out untuk peralihan sehala.

Pakej svelte/transition Svelte menyediakan tujuh fungsi peralihan yang telah dibina sebelum ini, mudah disesuaikan dengan svelte/easing untuk kesan animasi yang pelbagai tanpa menulis kod tersuai. Eksperimen dengan ini untuk memahami kemungkinan.

Perlukan pengenalan Svelte? Kami mempunyai gambaran keseluruhan yang komprehensif yang tersedia.

Membuat peralihan svelte adat

Untuk kawalan yang lebih baik di luar pilihan yang telah dibina, Svelte membolehkan menentukan fungsi peralihan tersuai, tertakluk kepada konvensyen tertentu. Struktur API, seperti yang didokumenkan, adalah:

 Peralihan = (nod: htmlelement, params: any) => {
  kelewatan?: nombor,
  Tempoh?: Nombor,
  pelonggaran?: (t: nombor) => nombor,
  css?: (t: nombor, u: nombor) => rentetan,
  Tick?: (t: nombor, u: nombor) => tidak sah
}

Fungsi peralihan menerima nod DOM dan mengembalikan objek dengan parameter animasi. Secara kritis, ia termasuk fungsi css atau tick .

Fungsi css mengembalikan rentetan CSS yang menentukan animasi (misalnya, perubahan atau perubahan kelegapan). Fungsi tick menawarkan kawalan JavaScript lengkap, tetapi pada kos prestasi kerana ia memintas animasi CSS.

Kedua -dua css dan tick menggunakan parameter t (0.00 hingga 1.00 pada kemasukan, 1.00 hingga 0.00 pada keluar) dan u (1 - t ). Sebagai contoh, transform: scale(${t}) Skala lancar dari 0 hingga 1 pada kemasukan dan membalikkan keluar.

Mari kita bina peralihan tersuai untuk menggambarkan.

Peralihan svelte tersuai pertama anda

Kami akan bermula dengan togol mudah untuk mengawal kehadiran DOM elemen menggunakan blok #if svelte (ingat, peralihan hanya berlaku pada kemasukan DOM/keluar).

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

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

{#if menunjukkan}
  <h1 id="Hello-peralihan-adat">Hello peralihan adat!</h1>
{/jika}

Toggling kotak semak menunjukkan penampilan/kehilangan yang nyata. Sekarang, mari tambahkan fungsi peralihan tersuai:

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

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

{#if menunjukkan}
  <h1 id="Hello-peralihan-adat">Hello peralihan adat!</h1>
{/jika}

Toggling kini log elemen ke konsol, mengesahkan sambungan. Kami akan meningkatkan ini dengan animasi. Mari buat fungsi css untuk berskala:

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

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

{#if menunjukkan}
  <h1 id="Hello-peralihan-adat">Hello peralihan adat!</h1>
{/jika}

Unsur sekarang skala, tetapi tiba -tiba. Menggunakan t untuk Animasi Lancar:

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

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

{#if menunjukkan}
  <h1 id="Hello-peralihan-adat">Hello peralihan adat!</h1>
{/jika}

Untuk kesan "swooping", mari tambahkan translateX , menghidupkan dari sisi:

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

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

{#if menunjukkan}
  <h1 id="Hello-peralihan-adat">Hello peralihan adat!</h1>
{/jika}

Di sini, u (songsang t ) mengawal translateX , memastikan pergerakan lancar.

Akhirnya, mari kita tambahkan fungsi pelonggaran:

<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">
  Menunjukkan
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if menunjukkan}
  <h1 id="Hello-peralihan-adat">Hello peralihan adat!</h1>
{/jika}

Kesimpulan

Anda kini telah mencipta peralihan svelte adat! Ini hanya titik permulaan; Terokai dokumentasi dan tutorial untuk teknik yang lebih maju. Memahami interaksi t dan u adalah kunci untuk mewujudkan animasi dinamik.

Atas ialah kandungan terperinci Menjadikan Peralihan Svelte Khas pertama anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!