الفرق بين المراجعتين ل"CSS/transition-property"

مراجعة 12:01، 18 أغسطس 2018

الخاصية transition-property في CSS تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال.

بطاقة الخاصية

القيمة الابتدائية	`all`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمات محجوزة */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;

/* القيم العامة */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

ملاحظة: قائمة الخاصيات القابلة للتحريك عرضةٌ للتغيير، وبالتالي يجدر بك تفادي استخدام أيّة خاصيات لا تقبل التحريك حاليًا، فقد يؤدي ذلك إلى نتائج غير متوقعة.

إذا استخدمتَ خاصية مختصرة مع هذه الخاصية (مثلًا background) فسيُطبَّق تأثير الانتقال على جميع الخاصيات الفرعية القابلة للتحريك.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0 (مع السابقة `-webkit-`) 26.0	4.0 (مع السابقة `-moz-`) 16.0	10	11.5 (مع السابقة `-o-`) 12.1	3.1 (مع السابقة `-webkit-`) 6.1

البنية العامة

تقبل الخاصية transition-property قيمةً واحدةً أو أكثر تُحدِّد ما هي الخاصيات التي ستخضع لتأثير الانتقال.

`none`

لن تُحرَّك أيّة خاصية

`all`

ستُحرَّك جميع الخاصيات القابلة للتحريك.

`<custom-ident>`

أسماء الخاصيات التي يجب تحريكها. يمكن تحديد اسم أكثر من خاصية معًا بفصلها بفاصلة.

البنية الرسمية

transition-property: none | <single-transition-property>#;

حيث:

<single-transition-property> = all | <custom-ident>

مصادر ومواصفات

مسودة CSS Transitions.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>transition-property</code>}}</noinclude>
-الخاصية <code>transition-property</code> في CSS تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال.<nowiki/><syntaxhighlight lang="css">
+الخاصية <code>transition-property</code> في CSS تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>all</code>
+|-
+! scope="row" |تُطبَّق على
+|جميع العناصر.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للتحريك
+|لا
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت.
+|}<syntaxhighlight lang="css">
 /* كلمات محجوزة */
 transition-property: none;
@@ سطر 18: / سطر 37: @@
 إذا استخدمتَ خاصية مختصرة مع هذه الخاصية (مثلًا <code>[[CSS/background|background]]</code>) فسيُطبَّق تأثير الانتقال على جميع الخاصيات الفرعية القابلة للتحريك.
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>all</code>
-|-
-! scope="row" |تُطبَّق على
-|جميع العناصر.
-|-
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للتحريك
-|لا
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت.
-|}
 == دعم المتصفحات ==
@@ سطر 59: / سطر 61: @@
 تقبل الخاصية <code>transition-property</code> قيمةً واحدةً أو أكثر تُحدِّد ما هي الخاصيات التي ستخضع لتأثير الانتقال.
-=== القيمة <code>none</code> ===
+===  <code>none</code> ===
 لن تُحرَّك أيّة خاصية
-=== القيمة <code>all</code> ===
+===  <code>all</code> ===
 ستُحرَّك جميع الخاصيات القابلة للتحريك.
-=== القيمة <code><custom-ident></code> ===
+===  <code><custom-ident></code> ===
 أسماء الخاصيات التي يجب تحريكها. يمكن تحديد اسم أكثر من خاصية معًا بفصلها بفاصلة.