5. Crossfade
La meilleure transition de la Terre !
Il existe une transition plus cool que toutes les autres : crossfade.
Cette transition permet de "déplacer" des éléments d'un endroit vers un autre. Plutôt que de décrire l'effet que ça rend, allez plutôt voir ici pour mieux vous rendre compte.
Elle fonctionne en "envoyant" un élément vers un autre, qui lui va "recevoir" celui qui a été envoyé.
Comme pour toutes les transitions, la transition
crossfadedoit s'appliquer sur des éléments qui sont susceptibles d'être ajoutés ou supprimés par un bloc logique, comme un{#if}ou un{#each}.
Utilisation
Pour créer ce genre de transition :
- vous devez d'abord créer
sendetreceiveen exécutantcrossfadeavec quelques paramètres, commeduration - puis, il faut ajouter des transitions
inetoutcorrespondant àsendetreceivesur chacun des éléments que vous souhaitez voir échanger leur place - enfin, il est nécessaire d'identifier précisement les éléments en train de transitioner en
utilisant une clé
key(unidpar exemple)
<script>
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
duration: 500
});
</script>
{#if condition}
<h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
{:else}
<small in:send={{ key }} out:receive={{ key }}>small elem</small>
{/if}Cette transition n'est pas une animation, même si elle en l'air. En effet, les éléments qui transitionnent simultanément ne font qu'échanger leur place tout en apparaissant / disparaissant, créant l'illusion d'un déplacement.