لا يبدأ انتقال CSS أو لم يتم استدعاء رد الاتصال

ملخص المشكلة

يتم تحديث موضع عنصر HTML باستخدام انتقالات CSS. ومع ذلك، يفشل تشغيل النقل أو لم يتم استدعاء وظيفة رد الاتصال على الرغم من إضافة مستمع لحدث انتقال الانتقال. يمكن حل هذه المشكلة عن طريق تغليف التغيير بـ setTimeout(1ms).

شرح الحل

يكمن السبب وراء هذا السلوك في عملية العرض في المتصفح. قبل أن يتمكن المتصفح من تطبيق انتقال CSS، يجب عليه أولاً تطبيق الأنماط المضمنة على العنصر. إذا لم يكن العنصر موجودًا بعد في DOM، فسيتم تعيين نمط عرضه المحسوب على "".

عندما يتم تعيين النمط الجديد، فإن المتصفح لم يطبق النمط المضمن بعد. لذلك، يظل النمط المحسوب للعنصر كـ ""، مع بقاء قيمه اليسرى والعليا عند 0 بكسل.

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

لحل هذه المشكلة، يمكن فرض إعادة التدفق باستخدام Element.offsetHeight getter أو أساليب DOM الأخرى التي تتطلب أنماطًا محدثة . وهذا يفرض على المتصفح تحديث الأنماط قبل تطبيق النقل، مما يضمن التنفيذ السلس.

مثال

يوضح التعليمة البرمجية التالية المشكلة والحل البديل لها:

document.body.innerHTML  = tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

animdiv.style.backgroundColor = 'green';
Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});

في هذا المثال، يتم استخدام OffsetTop getter لعنصر animdiv لفرض إعادة التدفق قبل تحديث موضعه. وهذا يضمن تشغيل انتقال CSS بشكل صحيح واستدعاء وظيفة رد الاتصال.