javascript - Mengapa menggunakan animation-defer atau settimeout untuk melengahkan menyebabkan animasi tersekat, manakala tidak menggunakan kelewatan adalah sangat lancar?

Question

1. Mengapa menggunakan animation-defer atau setimeout untuk melambatkan menyebabkan animasi lag, tetapi ia sangat lancar tanpa menggunakan kelewatan Saya memindahkan gambar 800k tidak bermakna ia akan sentiasa tersekat animasi: bergerak naik 0.9s mudah masuk ke hadapan;...

黄舟 · Answer

CSS Anda menambah translateZ(0) untuk mendayakan pecutan perkakasan Bahagian ini sebenarnya tersekat, tetapi ia adalah apabila halaman memuatkan CSS, jadi tidak akan ada ketinggalan semasa bermain proses pramuat, yang berlaku semasa proses mengembalikan hasil selepas pemapar penyemak imbas menghantarnya ke perkakasan untuk pengiraan (anda boleh menyemak keterlihatan memori daripada dua skema animasi tak alih, JS menggunakan tamat masa dan tidak menggunakan tamat masa; sudah tentu, jurang memori antara kedua-duanya akan kelihatan jelas hanya apabila animasi kompleks dan formatnya sangat besar), namun, kawalan JS anda secara buatan melambatkan proses pramuat dan memisahkan animasi tertunda daripada animasi semasa (bayangan dan ketelusan) jelas akan berkelip, melangkau bingkai, atau bahkan membeku; Sudah tentu, terdapat satu lagi contoh ekstrem: pencampuran transformasi, peralihan dan animasi... Apabila bertukar antara dua animasi, anda perlu menukar proses animasi yang telah dimuatkan, dan situasi di atas juga akan berlaku; 🎜#

Maaf, saya terlalu banyak bercakap PS: chrome, FF, dan IE10 sudah menyokong penulisan standard 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%);
  }
}

Maaf, saya terlalu banyak bercakap PS: chrome, FF, dan IE10 sudah menyokong penulisan standard 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%);
  }
}