Lorsque HTML5 et CSS3 sont progressivement devenus courant, je suis très habitué à utiliser JS pour faire des animations simples. Parce que sur les navigateurs de bureau, tous ne prennent pas en charge CSS3. Les utilisateurs sont également très étranges. Tous les utilisateurs ne peuvent pas être cultivés. Il y a toujours beaucoup de gens qui pensent que Win7.win8 n'est pas aussi utile que XP. Mais le téléphone mobile est très différent, et le navigateur mobile prend très bien en charge HTML5 et CSS3. Cependant, la capacité de traitement matériel des téléphones mobiles est très limitée. Aujourd'hui, lorsque les téléphones mobiles quad-core et octa-core sont rampants, il y a encore des gens qui utilisent des téléphones mobiles à double noyau ou un core comme moi. Bien que JS soit bon, je n'ai pas beaucoup de contact avec vous, donc je ne peux pas bien ajuster ce sentiment. Un coup de page simple se déroule très bien sur le PC i7, mais il est coincé, bégayé, bégayé, bégayé et bégayé sur mon téléphone double cœur. C'est très déprimant. Pour cette raison, j'ai également cherché longtemps et lu beaucoup. Enfin, avant de m'installer, j'ai trouvé une méthode relativement simple: utilisez CSS3 pour exécuter des animations.
Dans le passé, en plus des fonctions d'animation de JQuery telles que l'animation, Settimeout et SetInterval ont été utilisées pour modifier la marge, la largeur, le haut et d'autres propriétés d'un élément. C'est précisément cela qui me fait confondre.
Tout d'abord, setTimeout, setInterval ne peut pas être exécuté tout le temps simplement en définissant 0 ms. J'ai découvert accidentellement ce secret lors de son débogage dans un iscroll. Il s'avère que le calcul du retard de la minuterie repose sur l'horloge intégrée du navigateur, et la précision de l'horloge dépend de la fréquence des mises à jour de l'horloge. L'intervalle de mise à jour entre IE8 et ses versions IE précédentes était de 15,6 millisecondes. C'est fini, je pense que cela effectue un déplacement 1px en 10 ms, et il ne peut pas le faire à temps.
Et que se passe-t-il avec la carte? Carte, car le code n'est pas bien écrit. Après tout, JS est unique, et une fois qu'il y a des actions longues, l'interface utilisateur peut ne pas répondre. Bien que nous ayons utilisé Settimeout, c'est précisément parce que Settimeout qui nous fait ressembler à l'interface n'est pas mort, mais l'action n'est pas fluide. Parce qu'après l'exécution Settimeout cette fois, avant la prochaine exécution, une autre action qui prend du temps peut être rencontrée dans l'intervalle moyen, de sorte que l'exécution de Settimeout sera illimitée. Alors quoi? Carte! Cependant, il y a une autre raison pour laquelle la carte peut déclencher accidentellement la disposition du navigateur (c'est-à-dire: relais) lors de la modification de l'attribut d'origine. Cette question prend du temps, mais elle prend du temps. Il prend du temps, mais il peut souvent être ignoré. Mais plusieurs fois, il ne peut pas être ignoré.
En plus des deux paragraphes ci-dessus, il y a un autre problème, c'est-à-dire sur de nombreux téléphones mobiles, il a toujours l'impression qu'il est cadre par image, et il peut également être cadre par trame long et court. C'est un rythme qui peut ruiner tout le monde. Pourquoi cela se produit-il? Cela a encore quelque chose à voir avec le retard de Settimeout. Jeter les cadres. Ce problème implique la fréquence de rafraîchissement du moniteur. C'est vraiment trop compliqué.
Enfin, CSS3 a été sélectionné, JS a changé dynamiquement les attributs de l'élément et la transition a été utilisée pour contrôler le temps d'exécution de l'animation. Par exemple:
La copie de code est la suivante:
<div id = "test" style = "Transition: Tous les 1s facilité; largeur: 100px;" > / div>
JS:
La copie de code est la suivante:
$ ("# test"). Largeur (200);
De cette façon, après 1 seconde, la largeur de cette div deviendra 200px. Ce n'est pas comme si Sun Wukong s'agrandit en un instant, et il se précipite lentement sans se coincer ni s'arrêter. Et il y a un avantage à utiliser l'animation CSS, il n'est pas affecté par JS qui prend du temps. Bien que les threads d'interface utilisateur et les threads JS s'excluent mutuellement dans les navigateurs, cela n'est pas valide pour les animations CSS, et de nombreux navigateurs peuvent également permettre l'accélération matérielle (comme Chrome). Bien que la rediffusion du navigateur ne soit pas très évidente dans des situations ordinaires, la rediffusion à grande échelle doit être évitée. Ajoutez donc -webkit-transform: tradlatez (0); ou -webkit-transform: tradlate3d (0,0,0); de sorte que le navigateur rendra cette couche indépendamment. Même si le recouchage est inévitable, la zone est plus petite. C'est en effet une décision très sage d'utiliser Traduction pour remplacer la marge.
Enfin, certains changements communs déclencheront des propriétés de relais:
La copie de code est la suivante:
largeur
hauteur
rembourrage
marge
afficher
largeur des frontières
frontière
mine
Ce qui précède est tout le contenu décrit dans cet article. J'espère qu'il sera utile à tout le monde d'apprendre JavaScript et CSS3. En même temps, veuillez ajouter quelques lacunes et comprendre.