Effet de transition d'une page à l'autre.

Salut,

Le script JS n'est vraiment pas compliqué à faire, il faut ajouter (ou enlever c'est selon les goûts) une classe à ton conteneur un petit peu après la fin du chargement de page, puis gérer l'animation via le CSS.

JS:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('body').classList.add('is-ready');
}, false);

CSS:

body{
    opacity: 0;
    transform: translateX(-200px);
}
body.is-ready{
    opacity: 1;
    transform: translateX(0);
    transition-duration: 1s;
}

Salut !

Merci pour ton aide , mais je ne comprend pas un truc , La transition ne se fait pas à chaque coup ?

Merci d'avance,

Salut,

Si, à l'affichage de la page, lorsque le DOM est prêt.

C'est bizarre parce que j'ai l'impression que la transition se fait aleatoirement, le temps de mise en place du DOM n'est jamais le meme.
J'ai également une autre question le script , je le met à la fin de chaque page html ? parce que la transition ne fait que pour une page alors que j'ai mit le script sur toute.

Quel est ta structure de code ? MVC ? Procédural ?
Quoi qu'il en soit mets le script en bas de page et en dernier. Et rajoute ceci:

<script type="text/javascript">
(function() {
  document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('body').classList.add('is-ready');
  }, false);
})();
</script>

C'est vraiment bizarre , cela marche toujours pas , en revanche comment puis je savoir ma strucuture de code ? ;)

Beh ton site est codé comment ? PHP ? Tu as des controllers, des models et des views ?

Ha ok ^^' , j'ai mit uniquement du HTML et CSS , il n'y pas de chose compliquer, pas de controllers , ni de models ni de views...

Beh il te faut mettre le script dans chaque page HTML

Damn , sur firefox cela marche nickel mais sur chrome ca chie

Firefox est relou avec le cache, fais un CTRL+SHIFT+R.

J'ai regler IE , mais chrome ca bug toujours , mais c'est pas grv , ca modifie pas le site

C'est pas normal, j'ai un code similaire sur un de mes sites et il fonctionne sur tous les navigateurs, Chrome compris.