การเปลี่ยนรูปแบบคุณสมบัติทรัพย์สิน
ตัวอย่าง
วางเมาส์เหนือองค์ประกอบ div เพื่อค่อยๆ เปลี่ยนความกว้างและความสูง:
document.getElementById("myDIV").style.transitionProperty = "width,height";
ความหมายและการใช้งาน
คุณสมบัติ TransitionProperty ระบุชื่อของคุณสมบัติ CSS ที่เอฟเฟกต์การเปลี่ยนแปลงมีไว้สำหรับ (เอฟเฟกต์การเปลี่ยนแปลงจะเริ่มขึ้นเมื่อคุณสมบัติ CSS ที่ระบุเปลี่ยนแปลง)
เคล็ดลับ:โดยทั่วไป เอฟเฟกต์การเปลี่ยนแปลงอาจเกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ
หมายเหตุ:ระบุคุณสมบัติ TransitionDuration เสมอ มิฉะนั้น ระยะเวลาจะเป็น 0 และการเปลี่ยนแปลงจะไม่มีผลใดๆ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
transitionProperty | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransitionProperty |
12.1 |
ไวยากรณ์
ส่งคืนคุณสมบัติ TransitionProperty:
object.style.transitionProperty
ตั้งค่าคุณสมบัติ TransitionProperty:
object.style.transitionProperty = "none|all|property|initial|inherit"
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
ค่าเริ่มต้น: | ทั้งหมด |
---|---|
คืนมูลค่า: | สตริงที่แสดงถึงคุณสมบัติการเปลี่ยนแปลงคุณสมบัติขององค์ประกอบ |
เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติการเปลี่ยนแปลงคุณสมบัติ
❮ สไตล์วัตถุ