Faire votre première transition Svelte personnalisée

L'API de transition de Svelte offre un moyen puissant d'animer les composants entrant ou sortant du DOM, y compris la création de transitions personnalisées. Le fait de tirer parti des animations CSS par défaut garantit des performances optimales. La syntaxe de base est simple:<element transition:transitionfunction=""></element> . Vous pouvez également utiliser des directives in ou out des transitions à sens unique.

Le package svelte/transition de Svelte fournit sept fonctions de transition prédéfinies, facilement personnalisables avec svelte/easing pour divers effets d'animation sans écrire de code personnalisé. Expérimentez-les pour saisir les possibilités.

Besoin d'une introduction svelte? Nous avons un aperçu complet disponible.

Fabrication de transitions Svelte personnalisées

Pour un contrôle plus fin au-delà des options prédéfinies, Svelte permet de définir des fonctions de transition personnalisées, sous réserve de conventions spécifiques. La structure de l'API, telle que documentée, est:

 transition = (node: htmlelement, params: any) => {
  retard ?: numéro,
  durée ?: numéro,
  Selon ?: (T: Numéro) => Numéro,
  css ?: (t: numéro, u: numéro) => chaîne,
  cocher ?: (t: numéro, u: numéro) => void
}

Une fonction de transition reçoit le nœud Dom et renvoie un objet avec des paramètres d'animation. Surtout, il comprend une fonction css ou tick .

La fonction css renvoie une chaîne CSS définissant l'animation (par exemple, les transformations ou les changements d'opacité). La fonction tick offre un contrôle JavaScript complet, mais à un coût de performance car il contourne les animations CSS.

Les paramètres css et tick utilisent les paramètres t (0,00 à 1,00 à l'entrée, 1,00 à 0,00 à la sortie) et u (1 - t ). Par exemple, transform: scale(${t}) évolue en douceur de 0 à 1 à l'entrée et s'inverse à la sortie.

Construisons une transition personnalisée pour illustrer.

Votre première transition Svelte personnalisée

Nous allons commencer par une simple bascule pour contrôler la présence DOM d'un élément à l'aide d'un bloc svelte #if (rappelez-vous, les transitions ne se produisent que sur l'entrée / sortie DOM).

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

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

{#if affiche}
  <h1 id="Bonjour-la-transition-personnalisée">Bonjour la transition personnalisée!</h1>
{/si}

La baisse de la case à cocher affiche l'apparence / la disparition austère. Maintenant, ajoutons une fonction de transition personnalisée:

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

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

{#if affiche}
  <h1 id="Bonjour-la-transition-personnalisée">Bonjour la transition personnalisée!</h1>
{/si}

La bascule enregistre désormais l'élément à la console, confirmant la connexion. Nous allons améliorer cela avec l'animation. Créons une fonction css pour la mise à l'échelle:

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

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

{#if affiche}
  <h1 id="Bonjour-la-transition-personnalisée">Bonjour la transition personnalisée!</h1>
{/si}

L'élément évolue maintenant, mais brusquement. Utilisation de t pour l'animation lisse:

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

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

{#if affiche}
  <h1 id="Bonjour-la-transition-personnalisée">Bonjour la transition personnalisée!</h1>
{/si}

Pour un effet "swooping", ajoutons translateX , animant de côté:

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

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

{#if affiche}
  <h1 id="Bonjour-la-transition-personnalisée">Bonjour la transition personnalisée!</h1>
{/si}

Ici, u (inverse de t ) contrôle le translateX , assurant un mouvement fluide.

Enfin, ajoutons une fonction d'assouplissement:

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

{#if affiche}
  <h1 id="Bonjour-la-transition-personnalisée">Bonjour la transition personnalisée!</h1>
{/si}

Conclusion

Vous avez maintenant créé une transition Svelte personnalisée! Ce n'est qu'un point de départ; Explorez la documentation et les tutoriels pour des techniques plus avancées. Comprendre l'interaction de t et u est la clé pour créer des animations dynamiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!