css3 - Mengapakah paparan awal:blok perubahan transformasi tidak mempunyai kesan pergerakan?

Question

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

---Selepas membaca jawapan xiaoboost---
Pada akhirnya, ini adalah perubahan yang paling sesuai: https://jsfiddle.net/25d3ga9j...
Saya tidak menjelaskannya dengan jelas. t memerlukan animasi seterusnya, saya hanya memerlukan animasi kiri dari kanan ke kiri. Mengenai mengapa tiada kesan animasi dalam paparan awal: blok, mungkin item awal telah dipaparkan, dan aliran semula daya tidak mempunyai masa untuk melukis semula paparan: tiada tidak perlu melukis semula halaman, cuma pergi dari kanan ke kiri apabila kiri. Terima kasih sekali lagi.

--
Saya hanya boleh mengatakan bahawa masalahnya berkaitan dengan aliran semula daya ini, tetapi prinsipnya masih tidak jelas.

--Terdapat perbezaan besar antara pelayar yang berbeza
Pengubahsuaian di atas berfungsi dengan sempurna dalam Firefox, tetapi dalam Chrome57 (ubuntu) ia akan berkelip sekali apabila tetikus bergerak

--Paparan awal:sekat, cetak atribut transforms dan dapatkan aliran semula daya tidak berkuat kuasa. Untuk meringkaskan: display:block tidak berkuat kuasa apabila terdapat peralihan.
https://jsfiddle.net/25d3ga9j...

Answer 1

Pertama sekali, saya secara peribadi berpendapat ini adalah kerana proses pemaparan halaman web dan proses js adalah saling eksklusif.

Untuk butiran, anda boleh melihat soalan ini: Apabila saya menggunakan js untuk menambah className pada elemen, apakah yang berlaku kepada penyemak imbas?
Saya rasa jawapan yang mendapat undian teratas telah menjadikannya sangat jelas anda menambahkan ayat ini dalam skrip 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;
}

Saya rasa anda juga mahu memaksa halaman itu dilukis semula?

Saya secara peribadi tidak mengkaji pelaksanaan khusus pelayar dalam hal ini, tetapi menurut pemerhatian peribadi saya, walaupun membaca maklumat DOM akan memaksa lukisan semula halaman web, ia sebenarnya hanyalah pengiraan semula data dalaman, dan perubahan daripada DOM tidak Ia akan ditunjukkan dalam halaman, dan lukisan semula halaman sebenar hanya boleh menunggu sehingga proses js semasa selesai.

Khususnya dalam contoh anda, untuk menunjukkan perbezaan, saya menukar sedikit lebar .next dan .left dalam css, dan kemudian mencetaknya dalam js dan menambah Lebar selepas kelas .next atas:

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

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

🎜Di sini anda akan melihat bahawa lebar cetakan hanya separuh, menunjukkan bahawa data DOM dalam memori memang telah dikira semula, tetapi halaman itu belum dilukis semula. 🎜Sama seperti penyelesaian dalam soalan di sana, anda hanya boleh menggunakan fungsi tak segerak untuk mengosongkan proses pemaparan halaman dalam jurang antara penukaran kesan halaman, supaya anda boleh melihat kesan dinamik. 🎜 🎜Sebagai contoh, di sini anda boleh menukarnya seperti ini:🎜 rrreee