عادة ما يكون الفرق بين الواجهة التي تبدو رخيصة وتلك التي تبدو في الاعتبار هو خمس ثانية. الزر الذي يتم تثبيته على لون التمرير الخاص به في اللحظة التي يلمس فيها المؤشر يقرأ بشكل مفاجئ؛ نفس الزر الذي يسهل الوصول إلى هذا اللون على مدار مائتي مللي ثانية يقرأ كما هو مكتمل. هذا التيسير هو انتقال CSS، وبالنسبة لشيء صغير جدًا، من اللافت للنظر عدد المرات التي رأيته يحدث فيها خطأ، أو يتم وضعه على حالة التمرير بدلاً من الحالة الأساسية، أو ضبطه بواسطة التجربة والخطأ عبر عشرات التحديثات، أو تطبيقه على خاصية لا يمكن تحريكها على الإطلاق.
الانتقال هو المتصفح '؛ طريقة لتحريك التغيير بين قيمتين للخاصية بمرور الوقت، بدلاً من التبديل على الفور. إنه العمود الفقري وراء تأثيرات التحويم وحالات التركيز واللوحات الموسعة والفئات التي يتم تبديلها، وهو دائمًا تقريبًا الجزء الأول من الحركة الذي يضيفه أي شخص إلى المشروع. لكن الاختصار يحشر أربع قيم في سطر واحد بترتيب ثابت، ووظيفة التوقيت هي الجزء الذي يحدد شعور الحركة، وهناك منحدر معروف يسقط الناس عندما يحاولون تلاشي شيء ما منه display: none. بناء الانتقال حيث يمكنك رؤيته وهو يلعب يحفظ كل ذلك.
ال مولد الانتقال CSS يتيح لك اختيار خاصية، وتعيين المدة والتأخير بالمللي ثانية، واختيار وظيفة التوقيت من الكلمات الرئيسية لـ CSS ومجموعة من منحنيات بيزير المكعبة المنسقة. يمكنك تكديس عدة انتقالات في اختصار واحد، ويقوم زر التشغيل بتشغيل الحركة على عنصر المعاينة المباشرة حتى تشعر بالسهولة قبل الالتزام بها. الإعلان الدقيق موجود في مربع جاهز للنسخ أدناه.
ليرة تركية؛DR: يقوم انتقال CSS بتحريك التغيير بين قيمتين للخاصية خلال مدة محددة. إنه ينتمي إلى الحالة الأساسية، وليس حالة التحويم، وبالتالي يسهل العنصر في كلا الاتجاهين. الترتيب المختصر هو الخاصية، المدة، وظيفة التوقيت، التأخير. لا يمكنك الانتقال
displayلأنه لا يحتوي على قيم متوسطة، ويجب أن تفضل الرسوم المتحركةtransformوopacityللحصول على أداء سلس. يعرض هذا المولد كل جزء من خلال معاينة التمرير المباشر، ويدعم طبقات متعددة، وينبعث منه CSS نظيفًا. يتم تشغيله بالكامل في متصفحك بدون تسجيل.
ما هي المشكلة التي يحلها مولد انتقال CSS؟
الجزء الصعب من الانتقال ليس بناء الجملة؛ إنه أنه لا يمكنك الحكم على الحركة من خلال قراءتها. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) يصف سهولة الارتداد المحددة، ولكن الطريقة الوحيدة لمعرفة ما إذا كان هذا الارتداد مناسبًا لزرك هي مشاهدته وهو يحدث. ومشاهدة ذلك يحدث في مشروعك الخاص تعني كتابة القاعدة، وإعداد حالة التمرير، وحفظ الماوس وتحريكه فوق العنصر، ثم ضبط رقم واحد والقيام بذلك مرة أخرى. هذه الحلقة بطيئة بما يكفي بحيث يستقر معظم الأشخاص على أول شيء يعمل بدلاً من الشيء الذي يبدو أفضل.
يقوم المولد بتحويل تلك الحلقة إلى نقرة واحدة. تقوم بتعيين المدة والضغط على المشغل، ويقوم عنصر المعاينة بتشغيل الانتقال أمامك. قم بتغيير وظيفة التوقيت واضغط عليها مرة أخرى، وستشعر بالفرق بين الشريحة الخطية وتسوية السهولة على الفور. بعد بضع جولات، ستطور إحساسًا بما تشعر به مائتي مللي ثانية مقابل خمسمائة، وهو الحدس الذي يفصل الحركة التي تساعد عن الحركة التي تعترض الطريق. عندما تكون راضيًا، يكون نظام CSS العامل مكتوبًا بالفعل، لذلك لا يوجد شيء للنسخ.
تنطبق نفس وسيطة الموثوقية هنا كما هو الحال مع أي منشئ CSS مرئي: لا يمكنك إنتاج ملف تالف transition القيمة عن طريق سحب أشرطة التمرير والاختيار من القوائم، بحيث يكون الإخراج دائمًا آمنًا للصقه. هذا هو السبب وراء إبقائي لهذا النوع من الأدوات قريبًا، وهي نفس الغريزة وراء الوصول إلى مولد تحويل CSS عندما أحتاج إلى تحويل بدلاً من حساب الدرجات في رأسي.
أين يذهب الانتقال، على الحالة الأساسية أو حالة التحويم؟
هذا هو الخطأ الذي أراه أكثر من غيره، ومن الجدير بالذكر بوضوح لأن الإصلاح بسيط للغاية. ينتمي الانتقال إلى الحالة الأساسية للعنصر '؛، وليس إليها :hover قاعدة. عندما يتم الإعلان عن الانتقال في الحالة الأساسية، يقوم المتصفح بتحريك الخاصية في كلا الاتجاهين: فهو يخفف من تغيير التحويم عند وصول المؤشر، ويخفف مرة أخرى عندما يغادر المؤشر. هذا التماثل هو ما يجعل التفاعل يبدو كاملاً.
ضع الانتقال فقط :hover وتحصل على تأثير غير متوازن. يتم تحريك الخاصية بسلاسة في الطريق إلى الداخل، لأن الانتقال موجود أثناء تحريك العنصر، ولكن في اللحظة التي يغادر فيها المؤشر، فإن :hover لم تعد القاعدة تنطبق، ويعود الانتقال معها، وتعود الخاصية إلى الخلف على الفور. والنتيجة هي زر يخفف من حدة الحركة ثم يهز مرة أخرى، وهو ما يبدو أسوأ من عدم وجود رسوم متحركة على الإطلاق. تتم كتابة مخرجات المولد '؛s لتستمر في الحالة الأساسية، ويتم إدخال الإرشادات في الأداة لهذا السبب بالضبط. أعلن ذلك مرة واحدة، على العنصر نفسه، ودع تغييرات الحالة تؤدي إلى تشغيله.
ما هو الترتيب الصحيح للاختصار الانتقالي؟
ال transition يحزم الاختصار ما يصل إلى أربع قيم في سطر واحد، ويتم تحديد الترتيب حسب المواصفات: الخاصية، المدة، وظيفة التوقيت، التأخير. لذا transition: opacity 300ms ease-in-out 100ms تعني خاصية العتامة، التي تم تحريكها على مدى ثلاثمائة مللي ثانية، باستخدام منحنى سهولة الدخول والخروج، بعد تأخير قدره مائة مللي ثانية. احصل على الطلب بشكل خاطئ وسيتجاهل المتصفح الإعلان أو يقرأه كشيء لم تكن تقصده.
القاعدة الوحيدة التي تلتقط الأشخاص هي قيمتي الوقت. كل من المدة والتأخير أوقات، ويميزهما CSS حسب الموضع فقط: قيمة المرة الأولى هي المدة دائمًا، والثانية هي التأخير دائمًا. إذا كتبت قيمة زمنية واحدة فقط، فسيتم قراءتها على أنها المدة، ويظل التأخير عند الحد الافتراضي وهو الصفر. ولهذا السبب غالبًا ما يكون الانتقال الذي يبدو أنه يبدأ مبكرًا جدًا حالة تأخير مكتوبة عن طريق الخطأ أولاً. يتجنب المولد المشكلة برمتها من خلال إنشاء الاختصار لك بالترتيب الصحيح، ولا يحذف التأخير تمامًا عندما يكون صفرًا، لذلك لا تقوم أبدًا بشحن زائدة 0ms هذا لا يفعل شيئا. هنا التشريح في الجدول.
| جزء | مثال | ما يتحكم فيه |
|---|---|---|
| ملكية | opacity |
ما هي الخاصية التي تحرك، أو all لكل واحد متحرك |
| مدة | 300ms |
كم من الوقت تستغرق الرسوم المتحركة؛ قيمة المرة الأولى |
| وظيفة التوقيت | ease-in-out |
منحنى تسارع الحركة |
| تأخير | 100ms |
كم من الوقت للانتظار قبل البدء؛ قيمة المرة الثانية |
لماذا سيتم عرض العرض الخاص بي: لا يوجد انتقال غير متحرك؟
هذا هو الجرف، والجميع تقريبًا يخرجون منه مرة واحدة على الأقل. تريد أن يتلاشى العنصر، حتى تنتقل display من none إلى block ومجموعة opacity، والعنصر يظهر فقط بدون تلاشي. السبب أساسي: display ليست خاصية قابلة للتحريك. لا توجد نقطة منتصف الطريق بينهما none و block، لا توجد قيمة يمكن للمتصفح الاستيفاء إليها عند علامة الخمسين بالمائة، لذلك لا يوجد شيء يمكن أن يكون بينهما. يحدث التغيير على الفور، ويتم قطع أي رسوم متحركة عتامة قمت بوضعها في الأعلى لأنه لم يتم عرض العنصر في البداية.
الحل الكلاسيكي هو الرسوم المتحركة opacity و visibility معا والمغادرة display منه. visibility يمكن الانتقال لأنه، على الرغم من أنها أيضًا خاصية منفصلة، فإن إقرانها بمدة يتيح للمتصفح الاحتفاظ بالعنصر مرئيًا حتى يكتمل تلاشي العتامة عند الخروج. الإصلاح الحديث هو transition-behavior: allow-discrete، إمكانية أحدث تتيح لك تحريك خصائص منفصلة مثل display في نقاط نهاية المرحلة الانتقالية، حتى تتمكن حقًا من التلاشي منها display: none في المتصفحات التي تدعمها. وفي كلتا الحالتين، الدرس هو نفسه: تأكد من أن الخاصية التي تقوم بنقلها لها قيم متوسطة قبل أن تقضي ساعة في التساؤل عن سبب عدم تحرك أي شيء. هذا هو نوع المسكتك الذي تظهره المعاينة المباشرة في ثوانٍ، وهو جزء كبير من الحجة لبناء الحركة حيث يمكنك مشاهدتها.
ما هي دالة التوقيت، ولماذا تهم كثيرًا؟
دالة التوقيت هي جزء من الانتقال الذي يقرر كيف تشعر الحركة، وهي تقوم بعمل أكثر بكثير من المدة. يمكن أن يبدو التحولان بنفس الطول مختلفين تمامًا اعتمادًا على منحنىهما. أ linear يتحرك الانتقال بسرعة ثابتة ويشعر بأنه ميكانيكي، مثل جزء من الآلة. آن ease-out يبدأ الانتقال بسرعة ويتباطأ عند وصوله، وهو أمر طبيعي لأنه يحاكي كيفية تباطؤ الأشياء المادية، وهو الإعداد الافتراضي الصحيح لمعظم حركات الواجهة. ease-in يفعل العكس وهو الأفضل للأشياء التي تخرج من الشاشة.
في الأسفل، كل هذه منحنيات مكعبة بيزييه. الكلمات الرئيسية ease، ease-in، ease-out و ease-in-out هي مجرد أسماء ودية محددة cubic-bezier(x1, y1, x2, y2) القيم، حيث تشكل نقطتا التحكم التسارع. ما يجعل المكعب أكثر قوة هو أن نقطة التحكم ذات y القيمة التي تزيد عن واحد أو أقل من الصفر تدفع الرسوم المتحركة إلى ما بعد نقطة النهاية والعودة، وهي الطريقة التي تقوم بها ببناء تجاوز أو ارتداد. يشتمل المولد على منحنى قياسي مادي لحركة الواجهة النظيفة ومنحنى خلفي يتجاوز الشعور النابض والمرح، بالإضافة إلى steps() وظيفة للحركة التي تقفز في إطارات منفصلة بدلاً من الانزلاق، وهي الطريقة التي تقوم بها بتحريك كائن أو عداد موقوت. يعد اختيار المنحنى والضغط على الزناد أسرع طريقة لبناء إحساس بما يفعله كل فرد.
متى يجب أن أستخدم طبقات انتقالية متعددة؟
يؤدي الانتقال الواحد إلى تنشيط خاصية واحدة، لكن التفاعلات الحقيقية غالبًا ما تغير عدة خصائص في وقت واحد. قد يؤدي الزر الذي يرتفع عند التحويم إلى تغيير لون خلفيته، ودفع تحويله، وتعميق ظله، وقد يرغب كل واحد منهم في توقيته الخاص. ال transition تتعامل الخاصية مع هذا من خلال قائمة مفصولة بفواصل، حيث يكون كل إدخال عبارة عن انتقال كامل له خاصية خاصة به ومدته ووظيفة التوقيت والتأخير.
يدعم المولد ذلك مباشرة: أضف طبقة لكل خاصية، وقم بضبط كل منها بشكل مستقل، وتقوم الأداة بضمها في اختصار واحد مثل transition: background-color 200ms ease, transform 200ms ease-out. سبب إعطاء الخصائص انتقالات منفصلة بدلاً من استخدامها all هو السيطرة والأداء. transition: all مريح، ولكنه يحرك كل خاصية تتغير، بما في ذلك تلك التي لم تكن تنوي القيام بها، ويجبر المتصفح على مشاهدة كل شيء بحثًا عن التغييرات. تعد تسمية الخصائص المحددة أكثر قابلية للتنبؤ بها وأرخص. يُظهر الكشف البطيء المحدد مسبقًا في الأداة انتقالًا من طبقتين، وتلاشي العتامة وتحريك التحويل مع تأخير مشترك، وهي الوصفة القياسية لعنصر يسهل عرضه. إذا كان جانب التحويل لهذا الاقتران هو ما تقوم بضبطه، فإن مولد تحويل CSS هي الأداة المصاحبة، ويتم استخدام الاثنين معًا دائمًا تقريبًا.
ما هي الخصائص التي يجب أن أقوم بتحريكها للحصول على أداء سلس؟
ليست كل الخصائص رخيصة الثمن بنفس القدر في الرسوم المتحركة، والاختيار له تأثير مباشر على ما إذا كان انتقالك يعمل بمعدل ستين إطارًا سلسًا في الثانية أو يتلعثم. الخاصيتان المفضلتان هما transform و opacity. يمكن تسليم كلاهما إلى وحدة معالجة الرسومات وتركيبهما دون إعادة حساب تخطيط الصفحة، لذا يظل تحريكهما سلسًا حتى على الأجهزة المتواضعة. ولهذا السبب تنزلق البطاقة transform: translateX يشعر بالزبدة بينما يتم تحريك نفس البطاقة left يشعر بالخشونة.
الخصائص التي يجب تجنب تحريكها هي تلك التي تؤدي إلى التخطيط width، height، top، left، margin و padding. يؤدي تغيير أي من هذه العناصر إلى إجبار المتصفح على إعادة حساب موضع وحجم العنصر وكل ما يتأثر به، في كل إطار من الرسوم المتحركة، وهو أمر مكلف وهو السبب الأكثر شيوعًا للحركة السريعة. إذا وجدت نفسك ترغب في تحريك عرض ما، فعادةً ما يكون من المفيد السؤال عما إذا كان transform: scaleX من شأنه أن ينتج تأثير مماثل بتكلفة أقل. يتيح لك المولد اختيار أي خاصية حتى لا يتم حظرك أبدًا، ولكن الخصائص التي يسردها تضعها transform و opacity بالقرب من الأعلى لأن هذه هي تلك التي يجب أن تصل إليها أولاً. الحالة الأوسع لبناء مجموعة مدروسة من الأدوات مثل هذه موجودة في مجموعة أدوات مطور الويب القطعة، وعادات سير العمل وراءها موجودة في أدوات إنتاجية المطور مرشد.
كيف يحافظ المولد على صدقة المعاينة؟
يواجه كل منشئ مرئي نفس المخاطر: تنجرف المعاينة والرمز المصدر بعيدًا عن بعضهما البعض حتى تعلمك الأداة قيمة لن يتم إعادة إنتاجها. يطبق هذا المولد بالضبط transition القيمة التي يخرجها إلى عنصر المعاينة ويتم تشغيلها بتغيير الحالة الحقيقية، وبالتالي فإن الحركة التي تراها هي الحركة التي سينتجها CSS المنسوخ. لا يوجد مسار رسوم متحركة منفصل قد يختلف.
نظرًا لأن الانتقال لا يتم تشغيله إلا عندما تتغير الخاصية، فإن المعاينة تحتاج إلى حالة للتبديل بينها، وهو ما يفعله زر التشغيل: فهو يقلب العنصر بين مجموعتين من القيم بحيث يتم تشغيل الانتقال ويمكنك مشاهدته. وهذا يعكس كيفية عمل الانتقال في البرية، حيث يكون التمرير أو التركيز أو الفئة التي تم تبديلها هو ما يؤدي إلى إيقاف تشغيله. يظل الإخراج في حده الأدنى أيضًا، حيث يتم إسقاط التأخير عندما يكون صفرًا وإدراج الطبقات التي أضفتها فقط، وهو نفس الانضباط المتمثل في إصدار إعلانات ذات معنى فقط والتي تمر عبر مولد التدرج و ال مولد الظل الصندوقي.
ما هي المتصفحات التي تدعم انتقالات CSS؟
يتم دعم انتقالات CSS في كل متصفح حالي وقد تم دعمها منذ أكثر من عقد من الزمن. ال transition الخاصية وجميع أدواتها الطويلة عالمية وغير مسبوقة، لذا فإن مخرجات هذا المولد تعمل في Chrome وFirefox وSafari وEdge بدون أي بادئات أو بدائل للبائع. الأحدث transition-behavior: allow-discrete القدرة على تحريك الخصائص المنفصلة مثل display أحدث ويتمتع بدعم أضيق، لذا تعامل مع هذه التقنية المحددة باعتبارها تحسينًا تدريجيًا وحافظ على اقتران العتامة والرؤية كبديل لك. بالنسبة للقواعد الموثوقة، تعد مواصفات وحدة انتقالات CSS من المستوى 1 من W3C هي المصدر الأساسي، وتستحق القراءة بمجرد أن يمنحك المولد إحساسًا بكيفية ملاءمة القطع.
إذا كنت تقوم بتجميع مجموعة أوسع من أدوات CSS المرئية، ومولد التحويل و مولد مرشح CSS اقترن بشكل طبيعي بهذا، نظرًا لأن الانتقال هو ما يسهل التحويلات والمرشحات التي تقوم بإنشائها معهم. كل شيء هنا يعمل من جانب العميل، وCSS الذي تنسخه هو ملكك لاستخدامه بدون وقت تشغيل أو خطوة بناء أو تبعية.
الأسئلة المتداولة
ما هو مولد انتقال CSS؟
مولد انتقال CSS هو أداة مرئية تقوم بإنشاء انتقال CSS من الإعدادات التي تختارها. يمكنك اختيار خاصية ومدة ووظيفة توقيت وتأخير، ويقوم بإخراج اختصار الانتقال مع معاينة مباشرة يمكنك تشغيلها لمشاهدة التيسير.
أين أضع الانتقال على الحالة الأساسية أو حالة التحويم؟
ضعه على الحالة الأساسية. يؤدي الانتقال المعلن على القاعدة الأساسية إلى تحريك الخاصية في كلا الاتجاهين، إلى تغيير التحويم والعودة منه. يؤدي الإعلان عنه فقط عند التحويم إلى تنشيط التغيير ولكنه يسمح له بالعودة على الفور عندما يغادر المؤشر.
ما هو ترتيب الاختصار الانتقالي؟
الترتيب هو الخاصية، المدة، وظيفة التوقيت، التأخير، على سبيل المثال الانتقال: العتامة 300 مللي ثانية سهولة الدخول والخروج 100 مللي ثانية. قيمة المرة الأولى هي دائمًا المدة والثانية هي التأخير دائمًا، لذلك تتم قراءة قيمة زمنية واحدة على أنها المدة.
لماذا سيتم عرض شاشتي: لا يوجد شيء للعرض: لا يتم تحريك كتلة الانتقال؟
لأن العرض ليس خاصية قابلة للتحريك. لا توجد قيمة وسيطة بين لا شيء وكتلة، وبالتالي فإن المتصفح ليس لديه ما يبينه. عتامة الانتقال والرؤية معًا بدلاً من ذلك، أو استخدم سلوك الانتقال: السماح للفصل في المتصفحات الأحدث بالتلاشي من العرض: لا شيء.
هل يمكنني نقل أكثر من خاصية في وقت واحد؟
نعم. افصل كل انتقال بفاصلة، على سبيل المثال الانتقال: العتامة سهولة 300 مللي ثانية، قم بتحويل سهولة 200 مللي ثانية. يقوم هذا المولد بإنشاء تلك القائمة لك أثناء إضافة الطبقات، مما يمنح كل خاصية مدتها الخاصة ووظيفة التوقيت والتأخير.
ما هي دالة التوقيت المكعبة؟
تحدد وظيفة توقيت بيزير مكعب منحنى تسارع مخصص من نقطتي تحكم، بيزير مكعب مكتوب (x1، y1، x2، y2). الكلمات الرئيسية السهولة، والسهولة في الدخول، والسهولة في الخروج، والسهولة في الخروج هي اختصارات لمنحنيات محددة، ونقاط التحكم الأعلى من 1 أو أقل من 0 تخلق تجاوزًا، وهي الطريقة التي يتم بها بناء الارتداد.
ما هي الخصائص التي يجب أن أقوم بتحريكها للحصول على أداء سلس؟
تفضل التحويل والعتامة. يتم تركيبها على وحدة معالجة الرسومات ولا تؤدي إلى تشغيل التخطيط، لذا فهي تتحرك بمعدل 60 إطارًا في الثانية. يؤدي تحريك العرض أو الارتفاع أو الأعلى أو اليسار أو الهامش إلى إجبار المتصفح على إعادة حساب التخطيط على كل إطار، وهو السبب الأكثر شيوعًا للتحولات المتعثرة.
هل الانتقال الذي تم إنشاؤه CSS مجاني وآمن للاستخدام؟
نعم. الأداة مجانية تمامًا بدون حدود للتسجيل أو الاستخدام، وتصدر CSS قياسيًا غير مسبوق مدعومًا في كل متصفح حديث. تتم جميع عمليات المعالجة في متصفحك، لذلك لا يتم تحميل أي شيء وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميلها.
