إعادة تشغيل الرسوم المتحركة CSS3

يعد إحياء الرسوم المتحركة CSS3 عند تفاعل المستخدم مهمة شائعة. على الرغم من أن إزالة العنصر المتحرك وإعادة إدراجه قد يبدو فعالاً، إلا أنه يقدم تعقيدًا غير ضروري. يظهر حل أكثر دقة من خلال الاستفادة من قوة إعادة التدفق لإعادة ضبط الرسوم المتحركة بسلاسة.

توفر عملية إعادة التدفق، وهي عملية إعادة تنسيق وإعادة رسم بنية المستند، آلية مناسبة لتغيير الأنماط دون تعطيل الجدول الزمني للرسوم المتحركة. من خلال تعيين خاصية الرسوم المتحركة لفترة وجيزة على "لا شيء" ثم تشغيل إعادة التدفق، يحصل المتصفح على إشارة لتجاهل أي رسوم متحركة قيد التقدم. يسمح هذا بتغييرات النمط اللاحقة لتصبح نافذة المفعول على الفور، وإعادة تشغيل الرسوم المتحركة بشكل فعال.

للتوضيح، ضع في اعتبارك مقتطف JavaScript التالي:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

عند تشغيلها، تقوم هذه الوظيفة بإيقاف الحركة مؤقتًا على العنصر "المتحرك"، وتفرض إعادة رسم المتصفح، ثم تستعيد خاصية الرسوم المتحركة إلى حالتها الأصلية. من خلال تجنب التأخير أو تسلسل مهام الرسوم المتحركة، يعمل هذا الأسلوب على تبسيط عملية إعادة تعيين الرسوم المتحركة، مما يضمن تجربة بصرية سلسة.