خاصية انتقال النمط
مثال
مرر الماوس فوق عنصر div لتغيير مظهره تدريجيًا:
document.getElementById("myDIV").style.transition = "all 2s";
التعريف والاستخدام
خاصية النقل هي خاصية مختصرة لخصائص الانتقال الأربعة:
انتقال الملكية ، والمدة الانتقالية ، والتوقيت ، والتوقيت ، والتأخير.
ملاحظة: حدد دومًا خاصية transferDuration ، وإلا ستكون المدة 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: خاصية الانتقال
❮ نمط الكائن