Svelte : caler correctement des transitions entre écrans
Bonjour je développe une appli pour mobile avec Capacitor + Svelte + Routify.
J'ai des cartes dans une grid CSS 4x4. Ces cartes sont animées au clic en CSS dans le JS: rotateY(180deg) avec donc une temporisation d'environ une demi-seconde.
La grille sert pour le jeu, mais aussi pour le menu de choix des thématiques de cartes que l'on trouve au lancement de l'appli, avec une temporisation de "staggering", ou effet d'apparition progressive des cartes qui servent d'entrées pour le menu.
Le souci provient du calage des transitions entre les animations des cartes retournables et celui des transitions entre les différentes vues de l'application : tant que les animations de cartes ne sont pas terminées, cela décale (lag) vers la gauche désagréablement lors des changements de page. .. alors que le slot de la page parente est en cours de démontage !
comment corriger cela ?
Exemple de code du "PageSlide" (qui est d'ailleurs plutôt un "PageFade" puisque c'est une transition en fondu que j'utilise :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script lang="ts">
import { fade } from 'svelte/transition'
export let refresh = ''
let infade = {
delay: 0, duration: 250
}
let outfade = {
delay: 600, duration: 150
}
</script>
{#key pagepath }
<div class="page" in:fade={infade} out:fade={outfade}>
<slot />
</div>
{/key} |
Comment corriger ce problème ?
Merci pour vos avis ! Enjoy coding !
