انتقالات CSS مقابل JavaScript
اختر بين انتقالات إطارات CSS الرئيسية ودوال JavaScript tick
انتقالات CSS مقابل JavaScript درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
وضعان
تُرجع الانتقالات المخصصة إما دالة css تعتمد على GPU أو دالة tick تُدار عبر JavaScript في كل إطار.
متى نستخدم CSS
استخدموه مع transform وopacity واللون، أي كل ما يمكن لـ CSS تحريكه. يعمل CSS على المؤلف لتحقيق 60 إطارًا في الثانية.
متى نستخدم tick
استخدموه لتغييرات النص ووحدات بكسل canvas أو الخصائص الأخرى غير المدعومة في CSS.
تكلفة tick
تعمل tick في كل إطار للرسوم المتحركة باستخدام JavaScript، ولذلك فهي أعلى تكلفة من CSS.
النهج الهجين
يمكن لبعض الانتقالات استخدام CSS للمؤثرات المرئية وtick لتحديثات غير CSS العرضية.
التوافق بين المتصفحات
تحظى رسوم CSS المتحركة بدعم شامل، بينما تتوفر tick دائمًا لأنها مكتوبة بـ JS.
إمكانية الوصول
يحترم كلاهما prefers-reduced-motion إذا فحصتموه داخل الانتقال.
تحليل الأداء
استخدموا علامة تبويب Performance لمقارنة تطبيقات CSS وtick.
نمط التراجع
إذا تعذر على CSS تحقيق التأثير، فانتقلوا بسلاسة إلى tick.
الدمج
يمكن لعناصر متعددة ذات انتقالات مختلفة مزج CSS وtick في العرض نفسه.
أفضل ممارسة
اجعلوا CSS الخيار الافتراضي. استخدموا tick فقط عندما يتعذر على CSS التعبير عن الحركة فعلًا.
تحقق سريع
متى ينبغي تفضيل دالة css في الانتقال؟
خلاصة
اختاروا css للانتقالات المسرّعة بواسطة GPU، واحتفظوا بـ tick للرسوم غير المدعومة في CSS مثل تغييرات النص أو canvas.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «انتقالات CSS مقابل JavaScript» مجاني؟
نعم — نص درس «انتقالات CSS مقابل JavaScript» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «انتقالات CSS مقابل JavaScript»؟
اختر بين انتقالات إطارات CSS الرئيسية ودوال JavaScript tick تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «انتقالات CSS مقابل JavaScript»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كتابة دالة انتقال مخصصة
- معلمات الانتقال: node وduration وdelay
- إنشاء انتقال متحوّل
- انتقالات CSS مقابل JavaScript