อีกทางเลือกหนึ่งหากคุณไม่ต้องการให้เกิดการเปลี่ยนแปลงอย่างค่อยเป็นค่อยไประหว่างการแสดงและซ่อน (เช่นเคอร์เซอร์ข้อความที่กะพริบ) คุณสามารถใช้สิ่งต่อไปนี้:
/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {
from { visibility: visible }
to { visibility: hidden }
/* Alternatively you can do this:
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
if you don't want to use `alternate` */
}
.cursor {
animation: blinker steps(1) 500ms infinite alternate;
}
ทุกคน1s
.cursor
จะไปจากการvisible
hidden
หากไม่รองรับภาพเคลื่อนไหว CSS (เช่นใน Safari บางรุ่น) คุณสามารถย้อนกลับไปที่ช่วงเวลา JS ง่ายๆนี้:
(function(){
var show = 'visible'; // state var toggled by interval
var time = 500; // milliseconds between each interval
setInterval(function() {
// Toggle our visible state on each interval
show = (show === 'hidden') ? 'visible' : 'hidden';
// Get the cursor elements
var cursors = document.getElementsByClassName('cursor');
// We could do this outside the interval callback,
// but then it wouldn't be kept in sync with the DOM
// Loop through the cursor elements and update them to the current state
for (var i = 0; i < cursors.length; i++) {
cursors[i].style.visibility = show;
}
}, time);
})()
JavaScript แบบง่ายนี้จริง ๆ แล้วเร็วมากและในหลายกรณีอาจเป็นค่าเริ่มต้นที่ดีกว่า CSS เป็นที่น่าสังเกตว่ามันเป็นการโทร DOM จำนวนมากที่ทำให้แอนิเมชั่นของ JS ช้าลง (เช่น $ .animate $. JQuery ของ)
นอกจากนี้ยังมีข้อได้เปรียบที่สองที่ว่าถ้าคุณเพิ่ม.cursor
องค์ประกอบในภายหลังพวกเขาจะยังคงเคลื่อนไหวในเวลาเดียวกับที่คนอื่น ๆ.cursor
นับตั้งแต่รัฐมีการแบ่งปันสิ่งนี้เป็นไปไม่ได้ที่ CSS จะอยู่ไกลเท่าที่ฉันรู้