คุณสมบัติการเปลี่ยนสไตล์
ตัวอย่าง
วางเมาส์เหนือองค์ประกอบ div เพื่อค่อยๆ เปลี่ยนลักษณะที่ปรากฏ:
document.getElementById("myDIV").style.transition = "all 2s";
ความหมายและการใช้งาน
คุณสมบัติการเปลี่ยนแปลงเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติการเปลี่ยนแปลงสี่ประการ:
TransitionProperty, TransitionDuration, Transit TimingFunction และ TransitionDelay
หมายเหตุ:ระบุคุณสมบัติ TransitionDuration เสมอ มิฉะนั้น ระยะเวลาจะเป็น 0 และการเปลี่ยนแปลงจะไม่มีผลใดๆ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
ไวยากรณ์
ส่งคืนคุณสมบัติการเปลี่ยนแปลง:
object.style.transition
ตั้งค่าคุณสมบัติการเปลี่ยน:
object.style.transition = "property duration timing-function delay|initial|inherit"
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| transitionProperty | Specifies the name of the CSS property the transition effect is for |
| transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
| transitionTimingFunction | Specifies the speed curve of the transition effect |
| transitionDelay | Defines when the transition effect will start |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
| ค่าเริ่มต้น: | ทั้งหมด 0 ง่าย 0 |
|---|---|
| คืนมูลค่า: | สตริงที่แสดงถึงคุณสมบัติการเปลี่ยนแปลงขององค์ประกอบ |
| เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติการเปลี่ยนแปลง
❮ สไตล์วัตถุ