Vue, jolies transitions, et keep-alive

a marqué ce sujet comme résolu.

Bonjour,

Je travaille en ce moment sur la transition entre pages sur une appli utilisant Vue/Vuetify et plein de choses modernes. Je suis tombé sous le charme de ce site : testez les transitions, c’est mimi comme tout. Si vous observez le DOM, vous verrez un groupe comme ceci en haut du document :

<div class="page-load-wrapper">
    <div class="side-effect1" />
    <div class="side-effect2" />
    <div class="side-preload" />
</div>

Avec en gros ceci comme CSS :

.page-load-wrapper {
  position: fixed;
  z-index: 999;
  display: block;
  width:  100vw;
  padding-right: 0;
}
.side-effect1 {
  position: absolute;
  right: 0;    
  z-index: 999;
  display: block;
  width: 0;
  height: 200vh;
  background-color: #7c485f;
  transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);  
}
.side-effect2 {
  position: absolute;
  right: 0;
  z-index: 999;
  display: block;
  width: 0;
  height: 200vh;
  background-color: #23253a;
  transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.1s;
}
.side-preload {
  position: absolute;
  left: 0;
  z-index: 999;
  display: block;
  width: 100vw;
  height: 200vh;
  background-color: #23253a;
  transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
}

Bon. Je me dis qu’il y a moyen de faire l’équivalent pour mon app. J’aurais toutefois besoin d’un coup de main pour comprendre comment faire ça farpaitement avec le cycle de vie des composants sur Vue : @beforeLeave, @leave, @beforeEnter, @enter, et sans doute d’autres.

De ce que je comprends : chaque page a une div ".side-preload", un masque de couleur. Quand la page est chargée, le masque disparait vers la gauche. Quand on change de page, AVANT, deux autres masques viennent de la droite vers la gauche, et prennent tout l’écran. Là, la transition vers la nouvelle page se fait, qui arrive AVEC le masque initial visible, qui glisse vers la gauche, pour ne laisser que le contenu de la page visible.

Voilà la partie gestion du routeur de l’application (la mienne, pas celle du thé) :

<v-main>      
  <transition @beforeEnter="beforeEnter" @enter="enter" @beforeLeave="beforeLeave" @leave="leave" @afterLeave="afterLeave">
    <keep-alive>
      <router-view :key="$route.fullPath" />
    </keep-alive>
  </transition>
</v-main>

Et dans les methods, j’ai par exemple :

enter() {      
  let mask = document.getElementsByClassName('side-preload');
  mask[0].style.width = '0vw';
}

Et ça fait l’effet "slide-vers-la-gauche" quand on arrive sur le site. Mais je m’emmêle avec les autres :

leave() {     
  let effect1 = document.getElementsByClassName('side-effect1');
  let effect2 = document.getElementsByClassName('side-effect2');      
  effect1[0].style.width = '100vw';
  effect2[0].style.width = '100vw';       
},

Donc voilà le premier problème : m’aider à réorganiser les événements pour copier honteusement les effets du site du thé donné au début. Ensuite, quand ça fonctionnera, je ferai probablement "mouais en fait ça rend rien" et je laisserai tomber :p

Mon second problème est plus technique : sur les rares fois où j’ai réussi à faire un truc qui ressemble vaguement à l’objectif, ça ne fonctionne qu’une seule fois. Rien ensuite, des transitions brutes par défaut. Je soupçonne le <keep-alive> d’en être responsable. Quelqu’un pourrait-il me le confirmer (ou mieux, l’infirmer !) ? Si c’est bien lui le responsable, comment contourner le problème ? Je précise que ce keep-alive est bien plus important que mes transitions, au moins pour l’accueil : il s’agit de limiter des chargements très importants sur des aller-retours de l’utilisateur.

Ou est-ce que je dois mettre cet ensemble de div dans chacun de mes composants (="home" et "detail", en gros) pour faire les transitions, ou seulement sur le "App.vue" qui contient mes router-view ?

Merci pour vos avis.

Je ne vais pas répondre à ta question, mais en tant que client, si je tombe sur le site que tu donnes en exemple, je fuis pour deux raisons :

  1. Les polices d’écriture utilisées sont à peu près illisibles,
  2. Il faut se taper deux secondes et demie d’animation entre chaque page, plus le temps de chargement de la nouvelle page qui ne commence que quand l’animation est terminée. C’est beaucoup, beaucoup trop long.

Donc, attention en copiant des jolies animations : beau ≠ ergonomique.

Pas d’objection sur les polices. Pour la petite histoire j’ai eu l’occasion d’en discuter avec un designer parisien qui me disait que c’était la grande mode des polices "non régulières". Moi je te rejoins, ça me tue les yeux. Certains sites se contentent de cet effet sur les titres, c’est largement suffisant.

Par contre, je ne suis pas d’accord sur les temps de chargement, qui sont quasi-instantanés : oui, l’animation est trop longue (mais c’est un site sur du thé, j’imagine qu’on prend son temps quand on boit du thé ^^) mais le rendu reste fluide sur mon pc-patate avec ma connexion presque patate. Note que ce qui m’intéresse c’est l’effet "on fait passer un écran depuis la droite, on change de page discrètement, on fait disparaitre l’écran vers la gauche". Le timing (et les couleurs) seront revus ultérieurement.

Je ne vais pas répondre à ta question, mais en tant que client, si je tombe sur le site que tu donnes en exemple, je fuis pour deux raisons :

  1. Les polices d’écriture utilisées sont à peu près illisibles,
  2. Il faut se taper deux secondes et demie d’animation entre chaque page, plus le temps de chargement de la nouvelle page qui ne commence que quand l’animation est terminée. C’est beaucoup, beaucoup trop long.

Donc, attention en copiant des jolies animations : beau ≠ ergonomique.

SpaceFox

J’ajouterais à ta liste le fait que le site redéfinit le scroll sur le shop, ce qui le rend particulièrement lourd : imaginons qu’en tant que nouvel arrivant, je souhaite simplement voir rapidement les thés disponibles, je dois alors attendre une seconde à chaque fois que je passe sur un produit pour passer ensuite au suivant.

Par contre, je ne suis pas d’accord sur les temps de chargement, qui sont quasi-instantanés : oui, l’animation est trop longue (mais c’est un site sur du thé, j’imagine qu’on prend son temps quand on boit du thé ^^) mais le rendu reste fluide sur mon pc-patate avec ma connexion presque patate. Note que ce qui m’intéresse c’est l’effet "on fait passer un écran depuis la droite, on change de page discrètement, on fait disparaitre l’écran vers la gauche". Le timing (et les couleurs) seront revus ultérieurement.

JeanTilapin

Le problème, c’est que ce n’est pas simplement une question de temps de chargement : c’est vraiment le temps global d’affichage de la page qui est à considérer. Par ailleurs, l’argument « prendre son temps » ne tient pas pour moi, car le client pourrait très bien vouloir aller vite dans sa commande. Qui sommes-nous pour juger que le client peut bien perdre quelques minutes de plus à faire une simple commande ? Qui nous dit qu’il ne doit pas faire autre chose d’urgent ensuite ?

+0 -0

Restons dans le sujet, l’idée ici c’est faire de l’animation via Vue — les remarques sont pertinentes pour le faire bien mais n’oublions pas le cœur du sujet :) .


Je vais essayer de regarder ça et je repasse quand j’aurai pu tester un peu !

+5 -0

Coucou ^^

Je suis désolé, j’utilise Svelte plutôt que VueJS mais dans l’idée utilise plutôt les transitions qu’il y a sur la page de “Tea Shop” et réutilise les pour faire “About” et “Contact”.

Je ne sais pas pourquoi ça fait ça avec “About” et “Contact” mais ce type de transition, c’est pour démarrer et quitter le site web pas entre 2 pages du même site.

Exemple avec Svelte :

https://dev.to/buhrmi/svelte-component-transitions-5ie

Un peu moins sexy cependant mais c’est la même idée derrière. Si tu réussis bien, tu devrais avoir le même effet que sur le site que tu as donné mais sans le temps de chargement (comme dans l’exemple que j’ai montré).

Et là, t’as tout gagné. ^^

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte