Javascript Girl
  1. Javascript Girl
  3. Déclenchement de la transition CSS3 sur le chargement de la page
Intereting Posts
Besoin de données simples pousser vers le navigateur en utilisant node.js Qu'est-ce que TypeScript et pourquoi l'utiliserais-je à la place de JavaScript? Google Apps Script: Copiez la valeur de la cellule sur une autre feuille avec l'état pour copier et positionner la valeur Rechercher et mettre en surbrillance dans jQuery Imprimez un div avec les données de ajax ou jquery.get () Obliger les navigateurs à obtenir les derniers fichiers js et css dans l'application asp.net Question d'ordre d'exécution Javascript / jQuery Javascript: Comment mettre un délai simple entre l'exécution du code javascript? Accéder aux propriétés de l'objet dans l'objet Demande AJAX de la page HTTPS à l'URL HTTP Renvoi des données du rappel AJAX par javascript Est-ce que "laisser" remplacer une déclaration globale et jeter un ReferenceError? Ajouter des panneaux dynamiques fermés dans l'accordéon Bootstrap 3 Comment puis-je diviser une chaîne JavaScript par l'espace blanc ou la virgule? Keydown Simulation dans les feux Chrome normalement mais pas la touche correcte

Déclenchement de la transition CSS3 sur le chargement de la page

J'essaie d'obtenir un effet de chargement sur la charge de la page par la transition de largeur CSS3. Voici la démo .

HTML 

<div class="skill-bar"> <span class="w70"></span> </div>

CSS 

 .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position: relative; margin: 6px 0 12px 0; border: 2px solid #00edc2; } .skill-bar span { background: #00edc2; height: 7px; border-radius: 5px; display: inline-block; } .skill-bar span.w70 { width: 70%; } .skill-bar span { width: 0; transition: width 1s ease; -webkit-transition: width 1s ease; background-color: #00edc2; }

Il ne fonctionne pas comme prévu. J'ai besoin que la transition se produise lorsque la page est chargée.

Mais lorsque j'observe l'élément et vérifie / décoifie la width de la portée, j'entends l'effet.

Comment avoir le même effet sur le chargement de la page?

Entrez la description de l'image ici

Vous pouvez réaliser l'effet sans JavaScript et sans problème de compatibilité en utilisant l'animation CSS: 

 <div class="skill-bar"> <span class="w70"></span> </div> 
 .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position: relative; margin: 6px 0 12px 0; border: 2px solid #00edc2; } .skill-bar span { background: #00edc2; height: 7px; border-radius: 5px; display: inline-block; } .skill-bar span { animation: w70 1s ease forwards; } .skill-bar .w70 { width: 70%; } @keyframes w70 { from { width: 0%; } to { width: 70%; } }

Fiddle for webkit: http://jsfiddle.net/ySj7t/

En supprimant la classe de la portée et en la configurant en JavaScript, le navigateur appliquera la transition, mais cela ne fonctionne que sur la première .skill-bar . Aussi .getElementsByClassName ne fonctionnera pas dans IE8 ou ci-dessous.

HTML 

 <div class="skill-bar"><span></span></div>

JavaScript 

 document.getElementsByClassName('skill-bar')[0].getElementsByTagName('span')[0].className = 'w70';

(Il suffit de l'envelopper dans l'élément <script> après le HTML ou voir la fonction d'exécution lorsque la page est chargée

Démo Pure JavaScript

Vous voulez probablement une solution jQuery (ou autre cadre) pour assurer la compatibilité entre navigateurs, mais qui introduit une dépendance sur le framework. Si vous incluez jQuery déjà, génial. Sinon, vous devrez d'abord inclure cette bibliothèque, puis utilisez:

JQuery 

 $(window).load(function(){ $('.skill-bar span').addClass('w70'); });

Démo jQuery

Cliquez avec le bouton droit sur le cadre de sortie et sélectionnez Afficher la source de la trame pour voir le code de sortie.

Ajouter la classe via javascript: 

 $(".skill-bar span").addClass("w70");

Voir le violon ici .