Bolehkah saya mengekalkan peralihan CSS apabila atribut togol digunakan?
P粉4656759622023-08-02 21:13:37
0
1
456
<p>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.
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)`
});
}
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:
H sepatutnya berguna