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 
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.
.
