javascript - Pourquoi l'utilisation d'animation-defer ou de setimeout pour retarder provoque-t-elle le blocage de l'animation, alors que ne pas utiliser de retard est très fluide?

Question

1. Pourquoi l'utilisation d'animation-defer ou de setimeout pour retarder provoque-t-elle un décalage d'animation, mais ne pas utiliser de retard est très fluide. Je déplace une image de 800 000 octets. Son décalage ne signifie pas qu'elle sera toujours bloquée. Par exemple, lorsque l'animation suivante. : moveup 0,9s facilité d'entrée-sortie vers l'avant ; changements dans l'animation : moveup 0,9s facilité d'entrée-sortie vers l'avant 0,4s ;, il restera bloqué à environ 0,5s ?
2.

.content-up--img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;

}

.content-up--img.J_trans{
     -webkit-transform: translateX(100%) translateZ(0);
             transform: translateX(100%) translateZ(0);
    -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   perspective: 1000;

}
.content-up--img.J_end{
      -webkit-animation: moveup 0.9s ease-in-out forwards;
     animation: moveup 0.9s ease-in-out forwards;
}
@-webkit-keyframes moveup {

  0%{
     -webkit-transform: translateX(100%) translateZ(0);
             transform: translateX(100%) translateZ(0);
  }
  60%{
      -webkit-transform: translateX(-32px) translateZ(0);
             transform: translateX(-32px) translateZ(0);
  }
  100%{
    -webkit-transform: translateX(0) translateZ(0);
             transform: translateX(0) translateZ(0);
  }
}

@keyframes moveup {
 0%{
     -webkit-transform: translateX(100%) translateZ(0);
             transform: translateX(100%) translateZ(0);
  }
  60%{
      -webkit-transform: translateX(-32px) translateZ(0);
             transform: translateX(-32px) translateZ(0);
  }
  100%{
    -webkit-transform: translateX(0) translateZ(0);
             transform: translateX(0) translateZ(0);
  }
}

Le code principal est le CSS ci-dessus, et utilisez plus tard js pour ajouter le nom de la classe afin d'atteindre l'objectif

3. Il y aura un décalage lors du test sur le téléphone mobile, mais il n'y a aucun problème sur l'ordinateur et il n'y a pas de message d'erreur. Autrement dit, lorsqu'aucun délai n'est ajouté, l'animation peut se dérouler très facilement. sera basé sur le temps de retard ajouté, 0,4 s ou 0,6 s, etc., essayez de rester bloqué dans différentes positions. Ce n'est pas un problème lorsqu'il est testé sur un ordinateur, mais il restera bloqué lorsqu'il est testé sur mon téléphone portable. le téléphone est Android.

4. J'ai recherché diverses réponses sur l'ordinateur pour optimiser
/a/11...,
J'ai initialement utilisé left, mais plus tard je l'ai modifié et j'ai appris à utiliser transform

5. Le résultat final est

On dirait qu'il n'y a pas de problème, il n'y a pas de couleur rouge, je veux savoir quelle est la raison possible

Answer 1

CSS Vous avez ajouté TranslateZ(0) pour activer l'accélération matérielle. Cette partie est en fait bloquée, mais c'est lorsque la page charge CSS, il n'y aura donc pas de décalage lors de la lecture. processus de préchargement, qui se produit pendant le processus de renvoi du résultat après que le moteur de rendu du navigateur l'a transmis au matériel pour le calcul (vous pouvez vérifier la visibilité de la mémoire à partir de deux schémas d'animation immobiles, JS utilisant le délai d'attente et n'utilisant pas le délai d'attente ; bien sûr, l'espace mémoire entre les deux ne sera évident que lorsque l'animation est complexe et que le format est particulièrement grand), cependant, votre contrôle JS retarde artificiellement le processus de préchargement, et sépare l'animation retardée de l'animation actuelle. (ombre et transparence) scintillera évidemment, sautera des images ou même se figera

 ;

Bien sûr, il existe un autre exemple extrême : le mélange de transformation, de transition et d'animation... Lorsque vous basculez entre deux animations, vous devez changer le processus d'animation préchargé, et la situation ci-dessus se produira également #🎜 ; 🎜#

Désolé, j'ai trop parlé ; PS : Chrome, FF et IE10 prennent déjà en charge l'écriture standard du w3c

 ;

.content-up--img{
   position: absolute;
   top: 0;
   right:0;
   z-index: 15;
}
.content-up--img.J_trans{
   transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000;
}
.content-up--img.J_end{
   animation: moveup 0.9s ease-in-out;
}
@keyframes moveup {
 0%{
      transform: translateX(0);
  }
  60%{
      transform: translateX(-32px);
  }
  100%{
      transform: translateX(-100%);
  }
}