Bolehkah saya mengekalkan peralihan CSS apabila atribut togol digunakan?

Question

Saya mempunyai div yang bergerak dari kiri ke kanan. Untuk menjadikannya sentiasa di skrin dan tidak pernah dijajarkan apabila tetingkap diubah saiz, saya menukar penggunaan kiri dan kanan bergantung pada sisi skrin yang paling hampir.

P粉038161873 · Answer

Sebab peralihan anda kelihatan cepat pergi ke sisi lain apabila anda beralih dari kanan ke kiri adalah kerana anda menetapkan kiri dan kanan kepada nilai automatik. Peralihan CSS (atau animasi CSS secara umum) tidak berfungsi dengan prop dengan nilai auto.

Ini adalah daripada dokumentasi Menggunakan Peralihan CSS:

Mungkin anda lebih baik menggunakan sifat ubah CSS dengan fungsi translateX() dan bukannya prop CSS kiri/kanan. Melakukannya akan memberi anda satu nilai CSS yang boleh dipercayai? penukaran, dan meningkatkan prestasi.

Kod anda mungkin kelihatan seperti ini:

function moveTimeline(screenIndex) {

  ...

  if (isOnLeftSide) {
      timelineBackground.css({
         "transform": `translateX(-${new_timelinePosition}px)`
      });
  } else {
      timelineBackground.css({
          "transform": `translateX(${new_timelinePosition}px)`
      });
  }
}

Peralihan CSS anda akan kelihatan seperti ini:

transition: transform 1s ease;

H sepatutnya berguna