Pourquoi l'image clé de l'animation div ne fonctionne pas lorsque le moteur JavaScript est occupé?

Je structure de la page comme ci-dessous:Pourquoi l'image clé de l'animation div ne fonctionne pas lorsque le moteur JavaScript est occupé?

<head> 

<style> 
    .windows8 { 
     position: relative; 
     width: 78px; 
     height:78px; 
     margin:auto; 
     margin-top: 200px; 
    } 

    .windows8 .wBall { 
     position: absolute; 
     width: 74px; 
     height: 74px; 
     opacity: 0; 
     transform: rotate(225deg); 
     -o-transform: rotate(225deg); 
     -ms-transform: rotate(225deg); 
     -webkit-transform: rotate(225deg); 
     -moz-transform: rotate(225deg); 
     animation: orbit 6.96s infinite; 
     -o-animation: orbit 6.96s infinite; 
     -ms-animation: orbit 6.96s infinite; 
     -webkit-animation: orbit 6.96s infinite; 
     -moz-animation: orbit 6.96s infinite; 
    } 

    .windows8 .wBall .wInnerBall{ 
     position: absolute; 
     width: 10px; 
     height: 10px; 
     background: rgb(93, 147, 195); 
     left:0px; 
     top:0px; 
     border-radius: 10px; 
    } 

    .windows8 #1wBall_1,.windows8 #wBall_1 { 
     animation-delay: 1.52s; 
     -o-animation-delay: 1.52s; 
     -ms-animation-delay: 1.52s; 
     -webkit-animation-delay: 1.52s; 
     -moz-animation-delay: 1.52s; 
    } 

    .windows8 #1wBall_2,.windows8 #wBall_2 { 
     animation-delay: 0.3s; 
     -o-animation-delay: 0.3s; 
     -ms-animation-delay: 0.3s; 
     -webkit-animation-delay: 0.3s; 
     -moz-animation-delay: 0.3s; 
    } 

    .windows8 #1wBall_3,.windows8 #wBall_3 { 
     animation-delay: 0.61s; 
     -o-animation-delay: 0.61s; 
     -ms-animation-delay: 0.61s; 
     -webkit-animation-delay: 0.61s; 
     -moz-animation-delay: 0.61s; 
    } 

    .windows8 #1wBall_4,.windows8 #wBall_4 { 
     animation-delay: 0.91s; 
     -o-animation-delay: 0.91s; 
     -ms-animation-delay: 0.91s; 
     -webkit-animation-delay: 0.91s; 
     -moz-animation-delay: 0.91s; 
    } 

    .windows8 #1wBall_5,.windows8 #wBall_5 { 
     animation-delay: 1.22s; 
     -o-animation-delay: 1.22s; 
     -ms-animation-delay: 1.22s; 
     -webkit-animation-delay: 1.22s; 
     -moz-animation-delay: 1.22s; 
    } 



    @keyframes orbit { 
     0% { 
     opacity: 1; 
     z-index:99; 
     transform: rotate(180deg); 
     animation-timing-function: ease-out; 
     } 

     7% { 
     opacity: 1; 
     transform: rotate(300deg); 
     animation-timing-function: linear; 
     origin:0%; 
     } 

     30% { 
     opacity: 1; 
     transform:rotate(410deg); 
     animation-timing-function: ease-in-out; 
     origin:7%; 
     } 

     39% { 
     opacity: 1; 
     transform: rotate(645deg); 
     animation-timing-function: linear; 
     origin:30%; 
     } 

     70% { 
     opacity: 1; 
     transform: rotate(770deg); 
     animation-timing-function: ease-out; 
     origin:39%; 
     } 

     75% { 
     opacity: 1; 
     transform: rotate(900deg); 
     animation-timing-function: ease-out; 
     origin:70%; 
     } 

     76% { 
     opacity: 0; 
     transform:rotate(900deg); 
     } 

     100% { 
     opacity: 0; 
     transform: rotate(900deg); 
     } 
    } 

    @-o-keyframes orbit { 
     0% { 
     opacity: 1; 
     z-index:99; 
     -o-transform: rotate(180deg); 
     -o-animation-timing-function: ease-out; 
     } 

     7% { 
     opacity: 1; 
     -o-transform: rotate(300deg); 
     -o-animation-timing-function: linear; 
     -o-origin:0%; 
     } 

     30% { 
     opacity: 1; 
     -o-transform:rotate(410deg); 
     -o-animation-timing-function: ease-in-out; 
     -o-origin:7%; 
     } 

     39% { 
     opacity: 1; 
     -o-transform: rotate(645deg); 
     -o-animation-timing-function: linear; 
     -o-origin:30%; 
     } 

     70% { 
     opacity: 1; 
     -o-transform: rotate(770deg); 
     -o-animation-timing-function: ease-out; 
     -o-origin:39%; 
     } 

     75% { 
     opacity: 1; 
     -o-transform: rotate(900deg); 
     -o-animation-timing-function: ease-out; 
     -o-origin:70%; 
     } 

     76% { 
     opacity: 0; 
     -o-transform:rotate(900deg); 
     } 

     100% { 
     opacity: 0; 
     -o-transform: rotate(900deg); 
     } 
    } 

    @-ms-keyframes orbit { 
     0% { 
     opacity: 1; 
     z-index:99; 
     -ms-transform: rotate(180deg); 
     -ms-animation-timing-function: ease-out; 
     } 

     7% { 
     opacity: 1; 
     -ms-transform: rotate(300deg); 
     -ms-animation-timing-function: linear; 
     -ms-origin:0%; 
     } 

     30% { 
     opacity: 1; 
     -ms-transform:rotate(410deg); 
     -ms-animation-timing-function: ease-in-out; 
     -ms-origin:7%; 
     } 

     39% { 
     opacity: 1; 
     -ms-transform: rotate(645deg); 
     -ms-animation-timing-function: linear; 
     -ms-origin:30%; 
     } 

     70% { 
     opacity: 1; 
     -ms-transform: rotate(770deg); 
     -ms-animation-timing-function: ease-out; 
     -ms-origin:39%; 
     } 

     75% { 
     opacity: 1; 
     -ms-transform: rotate(900deg); 
     -ms-animation-timing-function: ease-out; 
     -ms-origin:70%; 
     } 

     76% { 
     opacity: 0; 
     -ms-transform:rotate(900deg); 
     } 

     100% { 
     opacity: 0; 
     -ms-transform: rotate(900deg); 
     } 
    } 

    @-webkit-keyframes orbit { 
     0% { 
     opacity: 1; 
     z-index:99; 
     -webkit-transform: rotate(180deg); 
     -webkit-animation-timing-function: ease-out; 
     } 

     7% { 
     opacity: 1; 
     -webkit-transform: rotate(300deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:0%; 
     } 

     30% { 
     opacity: 1; 
     -webkit-transform:rotate(410deg); 
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-origin:7%; 
     } 

     39% { 
     opacity: 1; 
     -webkit-transform: rotate(645deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:30%; 
     } 

     70% { 
     opacity: 1; 
     -webkit-transform: rotate(770deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:39%; 
     } 

     75% { 
     opacity: 1; 
     -webkit-transform: rotate(900deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:70%; 
     } 

     76% { 
     opacity: 0; 
     -webkit-transform:rotate(900deg); 
     } 

     100% { 
     opacity: 0; 
     -webkit-transform: rotate(900deg); 
     } 
    } 

    @-moz-keyframes orbit { 
     0% { 
     opacity: 1; 
     z-index:99; 
     -moz-transform: rotate(180deg); 
     -moz-animation-timing-function: ease-out; 
     } 

     7% { 
     opacity: 1; 
     -moz-transform: rotate(300deg); 
     -moz-animation-timing-function: linear; 
     -moz-origin:0%; 
     } 

     30% { 
     opacity: 1; 
     -moz-transform:rotate(410deg); 
     -moz-animation-timing-function: ease-in-out; 
     -moz-origin:7%; 
     } 

     39% { 
     opacity: 1; 
     -moz-transform: rotate(645deg); 
     -moz-animation-timing-function: linear; 
     -moz-origin:30%; 
     } 

     70% { 
     opacity: 1; 
     -moz-transform: rotate(770deg); 
     -moz-animation-timing-function: ease-out; 
     -moz-origin:39%; 
     } 

     75% { 
     opacity: 1; 
     -moz-transform: rotate(900deg); 
     -moz-animation-timing-function: ease-out; 
     -moz-origin:70%; 
     } 

     76% { 
     opacity: 0; 
     -moz-transform:rotate(900deg); 
     } 

     100% { 
     opacity: 0; 
     -moz-transform: rotate(900deg); 
     } 
    } 
    </style> 

<!-- 4-5 style links--> 

<!-- 4-5 scripts --> 

<!-- for testing you can put following code 
    for(var i=0;i<-1;i++){console.log(i)} 
--> 
</head> 

<body> 
    <app> 

    <div class="windows8"> 
     <div class="wBall" id="wBall_1"> 
     <div class="wInnerBall"></div> 
     </div> 
     <div class="wBall" id="wBall_2"> 
     <div class="wInnerBall"></div> 
     </div> 
     <div class="wBall" id="wBall_3"> 
     <div class="wInnerBall"></div> 
     </div> 
     <div class="wBall" id="wBall_4"> 
     <div class="wInnerBall"></div> 
     </div> 
     <div class="wBall" id="wBall_5"> 
     <div class="wInnerBall"></div> 
     </div> 
    </div> 
    </app> 

</body>

Il rend les divs avec toutes ses css (par exemple, rayon de la bille et la couleur de fond, etc.), mais cadre clés (transition/mouvement) de balle ne fonctionnent pas jusqu'à un certain temps (jusqu'à ce que tout css/js soit downlodé et analysé) mais après ça ça marche bien.

Je pensais que peut-être pendant le chargement et l'analyse syntaxique css/js le moteur de rendu sera occupé il ne peut pas exécuter la transition, mais quand je pris comme moi un regard sur d'autres pages Web qu'ils utilise des chargeurs css et fonctionne bien. Alors, comment leur animation fonctionne quand le mien ne fonctionne pas.

Source

2016-11-04 Akhilesh Kumar

Parce que les onglets du navigateur sont mono-thread. Certains navigateurs sont à thread unique, entièrement.

Si le JavaScript ne s'arrête jamais dans certains navigateurs, vous ne pouvez même pas fermer l'onglet.

Si vous voulez que le DOM soit repeint, ou canvas pour animer, ou que la page soit cliquable, vous pouvez et non verrouiller JS. Ce qui signifie que vous devez apprendre différents paradigmes de programmation pour briser les processus de longue durée.

Source

2016-11-12 23:33:41 Norguard

Pourquoi l'image clé de l'animation div ne fonctionne pas lorsque le moteur JavaScript est occupé?

Répondre

Questions connexes