5
votes

Comment faire des transitions de page avec Svelte / Sapper

Je souhaite réaliser une transition de page (route) simple dans Sapper. Quelque chose qui est facilement réalisable avec Nuxt par exemple. Quelqu'un a-t-il une idée de comment réaliser cela avec Sapper?

J'ai déjà enveloppé le contenu de ma page dans un div avec une directive transition: fade. Cela marche. Pourtant, les deux pages font la transition en même temps, c'est-à-dire lorsqu'une page passe à l'autre, l'autre entre déjà. Ce serait formidable si quelqu'un me dirigeait dans la bonne direction. Merci!

sapper svelte-transition

0 commentaires

3 Réponses :

9
votes

Permettez-moi de commencer par dire que je ne sais pas si c'est le moyen le plus efficace de le faire. C'est ainsi que je l'ai résolu et cela fonctionne très bien pour moi.

J'ai d'abord créé ma propre variation personnalisée de la transition 'fondu' et l'ai mise dans 'components / pageFade.js'

<script>
  import { fadeIn, fadeOut } from "../components/pageFade";

  // All your other JS goes here
</script>

<style>
  /* Styles go here */
</style>

<main in:fadeIn out:fadeOut>
  <!-- All the normal HTML goes here -->
</main>

La variable delayZero est là parce que pour une raison quelconque, elle ne prendra pas «0» directement et se cassera.
La variable de durée est la durée du fondu en millisecondes

Ensuite, pour tous les fichiers sur lesquels je voulais avoir cette transition, j'ai fait ce qui suit:

import { sineOut } from "svelte/easing";

let duration = 250;
let delay = duration;

let delayZero = 0;

export const fadeIn = _ => ({
  duration,
  delay,
  easing: sineOut,
  css: t => `opacity: ${t}`
});
export const fadeOut = _ => ({
  duration,
  delay: delayZero,
  easing: sineOut,
  css: t => `opacity: ${t}`
});

J'utiliserais ensuite cela comme modèle sur presque toutes les pages, ce qui semble beaucoup mais ce n'est pas trop mal.

J'espère que cela aide et laissez-moi savoir si vous avez d'autres questions!

Max

1 commentaires

Si je veux la même transition pour toutes les pages, dois-je ajouter une transition individuelle à chaque composant de page ou existe-t-il un moyen de l'ajouter à un seul endroit et de l'exécuter pour les composants de pages?

2
votes

Pour info @ max-larsson , à partir de votre code, fadeIn est défini comme une fonction qui n'a besoin d'aucun argument et retourne un objet ayant une propriété de duration égale à la valeur de la variable de duration à cette portée. même chose avec le delay . L' easing des sineOut est défini comme le nom, avec la valeur sineOut .

Cela peut être votre problème si vous avez simplement essayé de mettre un 0 littéral à la place du delay . Je vois que vous avez essayé de créer delayZero , mais vous l'avez probablement utilisé d'une manière différente de celle que vous aviez prévue. Vous vouliez probablement écrire ceci:

export const fadeOut = _ => ({
  duration,
  delay: 0,
  easing: sineOut,
  css: t => `opacity: ${t}`
});

Quand j'ai essayé cela, cela fonctionne très bien pour moi. Merci d'avoir partagé votre exemple.

0 commentaires

0
votes

Si vous souhaitez inclure la transition dans _layout.svelte et que vous n'avez pas besoin de les inclure dans chaque itinéraire, voici une alternative au reste des réponses.

Voici un simple vol aller / retour depuis la transition supérieure .

<!-- src/component/Nav.svelte -->
<script>
    export let segment;
</script>

<style>
  a {
    text-decoration: none;
  }
  .current {
    text-decoration: underline;
  }
</style>
<div>
  <a href="/" class='{segment === undefined ? "current" : ""}'>Home</a>
  <a href="/about" class='{segment === "about" ? "current" : ""}'>About</a>
</div>

Et voici le composant de mise en page

<!-- src/routes/$layout.svelte for Svelte@next -->
<!-- src/routes/_layout.svelte for Sapper -->

<script>
  import Nav from '../components/Nav';
  import PageTransitions from '../components/PageTransitions';
  export let segment;   
</script>

<Nav {segment}/>

<PageTransitions refresh={segment}>
  <slot/>
</PageTransitions>

Et pour être complet, voici un simple composant Nav

<!-- src/component/PageTransitions.svelte -->
<script>
  import { fly } from 'svelte/transition';
  export let refresh = '';
</script>

{#key refresh}
  <div
    in:fly="{{ y: -50, duration: 250, delay: 300 }}"
    out:fly="{{ y: -50, duration: 250 }}" 
    >
    <slot/>
  </div>
{/key}

REMARQUES: Nous rendons le composant réactif en créant un accessoire de refresh et en utilisant la directive de key ce qui signifie que lorsque la clé change, svelte supprime le composant et en ajoute un nouveau, déclenchant ainsi la transition.

Dans le composant de mise en page, nous transmettons le segment (route) comme accessoire de refresh et, par conséquent, la clé de rafraîchissement change à mesure que l'itinéraire change.

Voici une démo de l'exemple de code ci-dessus

0 commentaires