السلام عليكم، سنرى في هذا الدرس تقنية Transition و الخواص المتعلقة بها.
Transition هي تقنية تستعمل أثناء مدة انتقال عنصر HTML من حالة إلى حالة، و أثناء رجوعه من الحالة المنتقل إليها إلى الحالة الأولى، و يكون هذين الإنتقالين متشابهين من ناحية التأثير عبر هذه التقنية.
لدى تقنية Transition خاصية Shorthand بإسم 'TRANSITION'، و أربع خواص Longhand وهم :
* TRANSITION-PROPERTY
* TRANSITION-DURATION
* TRANSITION-TIMING-FUNCTION
* TRANSITION-DELAY
الخاصية TRANSITION-PROPERTY
مفهوم الخاصية TRANSITION-PROPERTY
تعتبر الخاصية 'TRANSITION-PROPERTY' الخاصية المسؤولة عن تحديد الخواص المراد التأثير عليها بتقنية Transition، و يشترط على هذه الخواص أن تكون متواجدة في كود CSS الحالة الثانية، و لا يهم إن كانت Longhand أو Shorthand.
قيم الخاصية TRANSITION-PROPERTY
لدى الخاصية 'TRANSITION-PROPERTY' القيمة 'ALL' وقيمة الخواص و القيمة 'NONE'.
• 'ALL' : هي القيمة التلقائية لخاصية 'TRANSITION-PROPERTY' حيث تعطي تأثير تطبيق تقنية Transition على جميع الخواص الموجودة في الحالة الثانية، و تطبق تلقائياً في حال عدم تواجد الخاصية 'TRANSITION-PROPERTY' في كود CSS المتوفر على تقنية Transition.
• قيم الخواص : تكتب عبارة عن إسم الخاصية المراد التأثير عليها بتقنية Transition، و في حالة كتابة أكثر من خاصية في نفس القيمة، يجب الفصل بينها بعلامة Comma (,).
• 'NONE' : تمنع هذه القيمة جميع خواص الحالة الثانية من التأثر بتقنية Transition.
و تقبل أيضاً الخاصية 'TRANSITION-PROPERTY' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.
• 'INHERIT' : تورث للعنصر تحديد الخواص المراد التأثير عليها بتقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية TRANSITION-DURATION
مفهوم الخاصية TRANSITION-DURATION
تعتبر الخاصية 'TRANSITION-DURATION' الخاصية المسؤولة عن تحديد المدة الزمنية التي يحدث أثناءها إنتقال العنصر من الحالة الأولى إلى الحالة الثانية و العكس صحيح، و هي خاصية مهمة في كود CSS المتوفر على تقنية Transition حيث بدونها يتعذر معاينة التقنية.
قيم الخاصية TRANSITION-DURATION
تقبل الخاصية 'TRANSITION-DURATION' القيم بـ 'S' أي الثانية، و 'MS' أي الميليثانية حيث أن ثانية واحدة تساوي ألف ميليثانية، و قيمتها التلقائية هي '0S'، و في حالة كتابة أكثر من قيمة في قيمة الخاصية 'TRANSITION-DURATION'، يجب فصلها بعلامة Comma استنادا بترتيب الخواص المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY' الموجودة في نفس الكود، حيث تخصَّص قيمة الخاصية 'TRANSITION-DURATION' الأولى للخاصية الأولى المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY'، و الثانية للثانية، و هكذا...
تقبل أيضاً الخاصية 'TRANSITION-DURATION' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.
• 'INHERIT' : تورث للعنصر تحديد المدة الزمنية للتقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية TRANSITION-TIMING-FUNCTION
مفهوم الخاصية TRANSITION-TIMING-FUNCTION
تعتبر الخاصية 'TRANSITION-TIMING-FUNCTION' الخاصية المسؤولة عن التحكم في السرعة الحركية للإنتقال من الحالة الأولى إلى الحالة الثانية و العكس، بمعنى تجعل الخاصية الإنتقال يتم بسرعات مختلفة كالتباطؤ أو التسارع أثناء المدة الزمنية المحددة له.
قيم الخاصية TRANSITION-TIMING-FUNCTION
لدى الخاصية 'TRANSITION-TIMING-FUNCTION' ثمان قيم خاصة، و تقبل قيمتين شاملتين.
القيمة EASE
هي القيمة التلقائية للخاصية، و تجعل الإنتقال يتحرك بسرعة حركية متسارعة في أول 10% للمدة الزمنية الإجمالية، ثم بسرعة ثابتة إلى غاية نصف المدة الإجمالية، ثم بسرعة متباطئة إلى نهاية المدة الإجمالية للإنتقال، و تطبَّق هذه القيمة أيضاً في حالة انعدام الخاصية في كود CSS المتوفر على تقنية Transition.
القيمة LINEAR
تجعل هذه القيمة الإنتقال يتحرك بسرعة ثابتة طيلة المدة الزمنية الإجمالية للإنتقال.
القيمة EASE-IN
تجعل هذه القيمة الإنتقال يتحرك بسرعة متسارعة طيلة المدة الزمنية الإجمالية للإنتقال.
القيمة EASE-OUT
تجعل هذه القيمة الإنتقال يتحرك بسرعة متباطئة طيلة المدة الزمنية الإجمالية للإنتقال.
القيمة EASE-IN-OUT
تجعل هذه القيمة الإنتقال يتحرك بسرعة حركية متسارعة في أول ثلث المدة الزمنية الإجمالية، ثم بسرعة ثابتة إلى غاية نهاية الثلث الثاني للمدة الإجمالية، ثم بسرعة متباطئة إلى نهاية المدة الإجمالية للإنتقال.
القيمة (STEPS(n,START
تجعل هذه القيمة الإنتقال يتحرك بسرعة حركية متقطعة، أي أن الإنتقال يتم عبر خطوات ممثلة بـ 'n' في القيمة حيث يكتب عدد صحيح يحدد عدد خطوات الإنتقال، و بالضبط في بداية كل خطوة، و في حال كان العدد هو 1، تستبدَل كامل القيمة بالقيمة 'STEP-START'.
القيمة (STEPS(n,END
تجعل هذه القيمة الإنتقال يتحرك بسرعة حركية متقطعة، أي أن الإنتقال يتم عبر خطوات ممثلة بـ 'n' في القيمة حيث يكتب عدد صحيح يحدد عدد خطوات الإنتقال، و بالضبط في نهاية كل خطوة، و في حال كان العدد هو 1، تستبدَل كامل القيمة بالقيمة 'STEP-END'.
القيمة (CUBIC-BEZIER(n,n,n,n
تخول هذه القيمة إمكانية إنشاء سرعات حركية خاصة، فلكل سرعة حركية منحنى ثنائي الأبعاد يتوفر على شريط أفقي يمثل المدة الزمنية للإنتقال، و شريط عمودي يمثل مسافة الإنتقال، و خط منحنى يبدأ من تقاطع الشريطين و ينتهي في أقصى أعلى يمين المنحنى، و من أجل احتراف إنشاء سرعات حركية يجب معرفة تحليل خط منحنى السرعات الحركية استناداً بقاعدتين :
القاعدة الأولى
السرعة الخطية = المسافة \ الزمن
تفيد هذه القاعدة في دراسة السرعة الحركية بدلالة المسافة و الزمن، فالسرعة الكبيرة هي مسافة كبيرة أثناء مدة زمنية صغيرة، و السرعة الصغيرة هي مسافة صغيرة أثناء مدة زمنية كبيرة، و بالتالي فكلما كان خط المنحنى أقرب من المستوى الخطي الشاقولي، كلما كانت السرعة الحركية أسرع، و كلما كان خط المنحنى أقرب من المستوى الخطي الأفقي، كلما كانت السرعة الحركية أبطأ.
القاعدة الثانية
- تقوس خط المنحنى من اليسار نحو الأعلى يدل على سرعة حركية متسارعة.
- تقوس خط المنحنى من الأسفل نحو اليمين يدل على سرعة حركية متباطئة.
- تقوس خط المنحنى من اليسار نحو الأسفل يدل على سرعة حركية متسارعة.
- تقوس خط المنحنى من الأعلى نحو اليمين يدل على سرعة حركية متباطئة.
- إستقامة مائلة لخط المنحنى يدل على سرعة حركية ثابتة.
- إستقامة أفقية لخط المنحنى يدل على سرعة حركية منعدمة.
- إستقامة عمودية لخط المنحنى يدل على السرعة الحركية الكبرى.
يمكن الإستعانة بآداة Cubic Bezier Function Tool في إنشاء السرعات الحركية حيث يتم توفير هذه الآداة من طرف أغلب مواقع البرمجة في الويب، و من أهمها هذا الموقع حيث يتوفر على الآداة في الجانب الأيسر لواجهته، و طريقة عمل الآداة هي عبر سحب النقطتين الزرقاء و الوردية ثم وضعهما في أي مكان في الآداة قصد تشكيل خط منحنى يتوافق مع الحاجيات المرغوبة، و بالتالي فمكان كل نقطة من النقطتين في الآداة يشكل إحداثيتا العرض و الإرتفاع حيث يمكن إقحامحها بين قوسي قيمة '()CUBIC-BEZIER'، و يتوفر محتوى أقواس هذه القيمة على أربع Parameters مفروقة بعلامة Comma و هم :
- Parameter الأول : يمثل إحداثية العرض للنقطة الوردية إبتداءً من يمين الآداة إلى يسارها بسعة 1 (من 0 إلى 1) و بدقة 0,01 و لا يقبل القيمة السالبة.
- Parameter الثاني : يمثل إحداثية الإرتفاع للنقطة الوردية بدون سعة حيث يقبل القيمة السالبة، و بدقة 0,01.
- Parameter الثالث : يمثل إحداثية العرض للنقطة الزرقاء إبتداءً من يمين الآداة إلى يسارها بسعة 1 (من 0 إلى 1) و بدقة 0,01 و لا يقبل القيمة السالبة.
- Parameter الرابع : يمثل إحداثية الإرتفاع للنقطة الزرقاء بدون سعة حيث يقبل القيمة السالبة، و بدقة 0,01.
القيم الشاملة
• 'INHERIT' : تورث للعنصر نوع السرعة الحركية من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الفيديو التوضيحي للدرس
الخاصية TRANSITION-DELAY
مفهوم الخاصية TRANSITION-DELAY
تعتبر الخاصية 'TRANSITION-DELAY' الخاصية المسؤولة عن المدة الزمنية قبل بدء تأثير تقنية Transition.
قيم الخاصية TRANSITION-DELAY
تقبل الخاصية 'TRANSITION-DELAY' القيم بـ 'S' أي الثانية، و 'MS' أي الميليثانية حيث أن ثانية واحدة تساوي ألف ميليثانية، و قيمتها التلقائية هي '0S'، و في حالة كتابة أكثر من قيمة في قيمة الخاصية 'TRANSITION-DELAY' يجب فصلها بعلامة Comma استناداً بترتيب الخواص المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY' الموجودة في نفس الكود، حيث تخصَّص قيمة الخاصية 'TRANSITION-DELAY' الأولى للخاصية الأولى المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY'، و الثانية للثانية، و هكذا...
تقبل أيضاً الخاصية 'TRANSITION-DELAY' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.
• 'INHERIT' : تورث للعنصر المدة الزمنية قبل بدء تأثير تقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية Shorthand لتقنية Transition
تسمى الخاصية Shorthand لتقنية Transition بـ 'TRANSITION'، و يكتب في قيمتها قيمة منفردة للخاصية 'TRANSITION-PROPERTY'، ثم فراغ من نوع Space، ثم قيمة منفردة للخاصية 'TRANSITION-DURATION'، ثم فراغ من نوع Space، ثم قيمة منفردة للخاصية 'TRANSITION-TIMING-FUNCTION'، ثم فراغ من نوع Space، ثم قيمة منفردة للخاصية 'TRANSITION-DELAY'
في حالة تعدد القيم في نفس الخاصية Shorthand، فيجب كتابة كل قيمة بالتنسيق المذكور أعلاه، و تفرقتها عن القيم المجاورة لها بعلامة Comma.
أما قيمتها التلقائية فهي هذه 'ALL 0S EASE 0S' أي القيم التلقائية لخواص التقنية Transition حسب تنسيق Shorthand.
تقبل أيضاً الخاصية 'TRANSITION' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.
• 'INHERIT' : تورث للعنصر تأثير تقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
• 'INHERIT' : تورث للعنصر تأثير تقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.
يمكن إنشاء اختلاف تأثير Transition بين الإنتقال من الحالة الأولى إلى الحالة الثانية و الرجوع من الحالة الثانية إلى الحالة الأولى، و ذلك بإقحام نفس خاصية التقنية Transition في كود CSS للحالة الأولى و في كود CSS للحالة الثانية، لكن بقيم مختلفة، بحيث عند الإنتقال من الحالة الأولى إلى الحالة الثانية، ستعطي CSS3 الأولوية لخاصية التقنية Transition في كود CSS للحالة الثانية، و عند الرجوع من الحالة الثانية إلى الحالة الأولى، ستعطي CSS3 الأولوية لخاصية التقنية Transition في كود CSS للحالة الأولى
الأكواد المستعملة في الدرس