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

Question

1. Mengapa menggunakan animasi-defer atau setimeout untuk melambatkan menyebabkan animasi lag, tetapi tidak menggunakan kelewatan adalah sangat lancar : bergerak naik 0.9s mudah masuk ke hadapan; perubahan kepada animasi: bergerak naik 0.9s mudah masuk keluar ke hadapan 0.4s;, ia akan tersekat pada kira-kira 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);
  }
}

Kod utama ialah css di atas, dan kemudian gunakan js untuk menambah nama kelas untuk mencapai tujuan

3. Akan ada lag semasa menguji pada telefon bimbit, tetapi tidak ada masalah pada komputer dan tiada mesej ralat, apabila tiada kelewatan ditambah, animasi boleh diteruskan dengan lancar akan berdasarkan masa tunda tambahan, 0.4s atau 0.6s, dsb., cuba tersekat dalam kedudukan yang berbeza Ini tiada masalah apabila diuji pada komputer, tetapi ia akan tersekat apabila diuji pada telefon bimbit saya telefon adalah Android.

4 Saya mencari pelbagai jawapan di komputer untuk mengoptimumkan
/a/11...,
Saya pada asalnya menggunakan kiri, tetapi kemudian saya menukarnya dan belajar menggunakan transform

5. Hasil akhir adalah

Nampak tak ada masalah, warna merah tak ada, nak tahu apa kemungkinan sebabnya

Answer 1

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%);
  }
}