Semblerait que votre Javascript est désactivé. Ce site requiert Javascript pour son bon fonctionnement.

Débuter les transitions seulement quand la page est téléchargée

 

Traduction de : Transitions Only After Page Load de Cris Coyier

Voici une traduction d'un article très intéressant et pratique.

Si vous avez déjà utilisé les transitions CSS sur des éléments de structure sur une page, vous avez probablement découvert que quelques fois vous voyez la transition avant que la page soit complètement téléchargée.

Petite vidéo d'un cas que j'avais :

Pour réparer ce dernier, j'ai ajouté une classe "preload" sur l'élément "body".

<body class="preload">

Pour m'assurer qu'aucune transitions va se faire, on ajoute au CSS:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Pour enlever cette classe lorsque la page est téléchargée:

<script>
/*jquery*/
$("window").load(function() {
  $("body").removeClass("preload");
});
/*mootools*/
window.addEvent('domready',function(){
 $(document.body).removeClass("preload");
});
</script>

Cela fonctionne très bien. Il serait vraiment bien d'être capable de prévenir ou de débuter des animations/transitions lorsque la page est téléchargée sans Javascript, mais hélas.

Petit ajout de ma part:

Vous pouvez tout aussi bien faire l'inverse en ajoutant une classe lorsque la page est complètement téléchargée au lieu de la retirer. Le css de cette classe devra alors avoir  les paramètres de l'animation.
De plus, il se peut que certains navigateurs ne comprennent pas la propriété de transition "none". C'est peut-être mieux alors d'avoir:

.preload * {
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -ms-transition: all 0s linear;
  -o-transition: all 0s linear;
}



Tag(s):
HTMLCSSJavascript Il n'y a pas de commentaires pour cet article.
 

Ajouter un commentaire

Username: