css3 - Pourquoi l'affichage initial : bloc de transformation de transition n'a-t-il aucun effet de mouvement ?

Question

https://jsfiddle.net/zjmove/2...

---Après avoir lu la réponse de Xiaoboost---
En fin de compte, c'est le changement le plus approprié : https://jsfiddle.net/25d3ga9j...
Je n'ai pas été clair. En fait, je ne le fais pas. Je n’ai pas besoin de l’animation suivante, je n’ai besoin que de l’effet de droite à gauche. Quant à savoir pourquoi il n'y a pas d'effet d'animation dans l'affichage initial : block, il se peut que l'élément initial ait déjà été affiché, et que la refusion forcée n'ait pas eu le temps de redessiner l'affichage : aucun n'a besoin de redessiner la page, juste ; aller de droite à gauche quand on est à gauche. Merci encore.

--
Je peux seulement dire que le problème est lié à ce reflux de force, mais le principe n'est toujours pas clair.

--Il existe de grandes différences entre les différents navigateurs
La modification ci-dessus fonctionne parfaitement dans Firefox, mais dans Chrome57 (ubuntu), elle clignotera une fois lorsque la souris bouge

--Affichage initial : bloquez, imprimez l'attribut de transformation et constatez que la refusion forcée ne prend pas effet. Pour résumer : display:block ne prend pas effet lorsqu'il y a une transition.
https://jsfiddle.net/25d3ga9j...

Answer 1

Tout d'abord, je pense personnellement que cela est dû au fait que le processus de rendu de page Web et le processus js s'excluent mutuellement.

Pour plus de détails, vous pouvez consulter cette question : lorsque j'utilise js pour ajouter className à un élément, qu'arrive-t-il au navigateur ?
Je pense que la réponse la plus votée a été très claire. Vous avez ajouté cette phrase dans le script js : js脚本中加入的这么一句：

$('.item')[0].offsetWidth;

我猜也是想要强制重绘页面吧？

我个人并没有研究过这方面浏览器具体的实现，但是根据我个人的观察，读取DOM的信息虽然会强制重绘网页，但实际上也只是内部数据的重新计算，DOM的改变并不会反映到页面中，真正的页面重绘还是只能等到当前js进程完成之后。

具体到你这个例子中，为了以示区别，我把.next和.left在css中的宽度稍微改了改，然后js中打印出添加上.next

.item.next {
  display: block;
  width: 50%;
  transform: translate3d(100%, 0, 0);
  left: 0;
}

.item.next.left {
  width: 100%;
  transform: translate3d(0, 0, 0);
  left: 0;
}

Je suppose que vous souhaitez également forcer le redessinage de la page ?

Personnellement, je n'ai pas étudié l'implémentation spécifique des navigateurs à cet égard, mais selon mon observation personnelle, bien que la lecture des informations du DOM forcera la page Web à être redessinée, il s'agit en fait simplement d'un recalcul des données internes et de modifications dans le DOM. ne le faites pas Cela sera reflété dans la page, et le véritable redessin de la page ne peut qu'attendre que le processus js en cours soit terminé.

Plus précisément dans votre exemple, afin de montrer la différence, j'ai légèrement modifié la largeur de .next et .left en CSS, puis je l'ai imprimé en js et ajouté Largeur après la classe supérieure .next :

$('.item').addClass('next');
console.log($('.item')[0].offsetWidth); 
$('.item').addClass('left');

$('.item').addClass('next');
setTimeout(() => {
    $('.item').addClass('left');
}, 1000);

🎜Ici, vous verrez que la largeur imprimée n'est que de moitié, indiquant que les données DOM en mémoire ont bien été recalculées, mais que la page n'a pas été redessinée. 🎜Semblable à la solution de la question là-bas, vous ne pouvez utiliser que des fonctions asynchrones pour libérer le processus de rendu des pages dans l'intervalle entre les changements d'effet de page, afin que vous puissiez voir les effets dynamiques. 🎜 🎜Par exemple, ici vous pouvez le modifier comme ceci :🎜 rrreee