Angular.js: ng-if يتصرف بشكل غريب مع الرسوم المتحركة للإطارات الرئيسية اللانهائية لـ CSS

تكمن المشكلة في أن ngAnimate يعتقد أن الرسوم المتحركة اللانهائية موجودة لجميع أحداث الرسوم المتحركة المستخدمة (مثل الإدخال والمغادرة وما إلى ذلك). ونظرًا لكونها حركة لا نهائية ، فلن يتم إطلاق أحداث CSS أبدًا حتى يمر العد التنازلي النهائي بعد 7.5 ثانية (5 × 1.5 == 7.5).

ستحتاج إلى إخبار ng-animate بعدم تحريك الرسوم المتحركة في الخلفية اللانهائية عن طريق تجاوز فئة .ng-animate CSS على العنصر وإلغاء الرسوم المتحركة للإطار الرئيسي.

http://plnkr.co/edit/fq7ZEO7tDnqLmavHoBfQ؟p=preview

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

للأسف ، فإن اكتشاف الأنماط وفئات CSS في JavaScript محدود للغاية. مع الإصدارات السابقة من AngularJS ، كان لدينا قاعدة أنه يمكنك فقط تحديد الرسوم المتحركة / الانتقال لـ CSS في خاصية الرسوم المتحركة (مثل .ng-enter و .ng-leave وما إلى ذلك) ، ولكن هذا تسبب في مشاكل أكثر مما تم حلها. لذا في هذه الحالة عليك أن تفعل العكس.

ملاحظة. كل ما تحتاجه هو -webkit- البادئة والقياسية animation الخصائص حيث أن جميع الشركات الأخرى انخفضت البادئات.

رائع ، شكرا على الحل.

لا يزال الشيء متعدد النسخ دفعة واحدة يبدو وكأنه خطأ بالنسبة لي: أكتب الكود الخاص بي على افتراض أن العنصر الذي يستخدم ng-if إما موجود مرة واحدة أو غير موجود على الإطلاق ، وأتوقع أن إطار لمنعه من الانهيار بسهولة بسبب خطأ مستجد غير مقصود. الرجاء تصحيح ما إذا كنت قد أسأت فهم كيفية عمل ng-if (أو ng-switch ).

كانت النسخ المتعددة موجودة لأن الرسوم المتحركة كانت لا تزال مستمرة. يحتوي $ animate على رسم متحرك catch-all للإطارات الرئيسية / الانتقالات التي تحدث بعد انتهاء مدتك * 1.5. لهذا السبب يختفون بعد لحظة.

كود ng-if الخاص بك هو الصحيح. ونعم يكون هناك فقط عندما يكون ذلك صحيحًا. لكن الأجزاء الداخلية تقوم بعمل نسخة جديدة من العنصر في كل مرة يصبح التعبير صحيحًا مرة أخرى. ولكن نظرًا لأن الرسوم المتحركة معلقة على العنصر الأقدم ، فلم يتم حذفها بعد حتى تظهر الرسوم المتحركة التي تم التقاطها بالكامل.

و ng-switch و ng-if تعمل بنفس الطريقة. يحتوي مفتاح ng فقط على عناصر متعددة بدلاً من عنصر واحد فقط.