Angular.js: إظهار ng-hide و ng-show في نفس الوقت لفترة قصيرة من الوقت في IE11

هذا يبدو مألوفا. المشكلة هي أنه لا يمكنني إعادة إنتاج هذه بشكل موثوق به في IE11. ربما حدث ذلك مرة كل 30 مرة بالنسبة لي. لقد رأيته أيضًا مرة واحدة على Firefox ، لذلك ربما يكون له علاقة بمدى سرعة قيام المتصفح بمسح قائمة انتظار requestAnimationFrame ، أو بالوقت الذي نستغرقه لاكتشاف ما إذا كانت الرسوم المتحركة مسموحًا بها.

هل يمكنك من فضلك الاختبار باستخدام أحدث لقطة: http://code.angularjs.org/snapshot/angular-animate.js ومعرفة ما إذا كان ذلك يحدث في كثير من الأحيان؟

في IE11 الخاص بي ، أحصل على وميض يظهر كلاهما في كل مرة أنقر فيها على مربع الاختيار. لا يبدو أن استخدام الزاوي المتحرك المرتبط يغير هذا السلوك.

هذا غريب. ما هو إصدار IE ونظام التشغيل لديك؟ وهل جهاز الكمبيوتر الخاص بك بشكل عام بطيء أو تحت الحمل؟

لدينا أجهزة كمبيوتر متطورة جدًا (جربت ثلاثة منها) ، وكان تخميني الأولي في الواقع أنه سريع بما يكفي لإظهار شيء مرئي فقط لفترة قصيرة من الوقت. أنا أقوم بتشغيل Windows 8.1 مع إصدار IE 11.0.9600.18202. كان أحد أجهزة الكمبيوتر التي جربتها عليه هو Windows 7 ، ويظهر نفس المشكلة.

أقوم حاليًا بتطبيق css هذا لتجنب المشكلة:
.ng-hide.ng-hide-animate {
العرض: لا شيء!
}

قد يتسبب هذا بالطبع في مشاكل لنا في المستقبل إذا أردنا تحريك بعض الإخفاء وعدم تحريك البعض.

حسنًا ، لم أفكر في أن الكمبيوتر سريع جدًا. يمكن أن يكون عليه. لدي أيضًا إصدار أحدث قليلاً من IE11 (11.0.9600.18204) ، لكنني أشك في أن هذا هو السبب.

لقد جربت هذا الآن في IE11 على Windows 7 الافتراضي الخاص بي ، وواجهت المشكلة ربما مرة واحدة كل 2-10 محاولة. قد يكون هذا بسبب أن جهازي الظاهري يعمل بشكل أبطأ ، لكن هذا مجرد تخمين.

أواجه نفس المشكلة في Chrome ، مع مفتاح ng. الحالة المحددة التي تحدث عند حدوث تغيير في قيمة العرض في ngModel ، والذي أ) يزيل فئة ng-valid-parse في النموذج الأصلي ، ب) يزيل فئة في حقل النموذج (مخصص empty class) و b) يقلب ng-switch (لأنه يتم تعطيل حقل النموذج بعد ذلك). يحدث ذلك لأن مهمة الرسوم المتحركة الرئيسية (أ) تعمل أولاً ، وينتظر المجدول حتى تكتمل ، ثم يطلب إطارًا آخر لتشغيل المهمة من حقل النموذج (ب) ، ثم ينتظر إطارًا آخر لتشغيل مهمة الحركة المتحركة ng-switch (ج) ، مما يتسبب في وميض إطار واحد حيث يتم عرض كلا العنصرين في مفتاح ng مؤقتًا.

plestik هل يمكنك نشر عرض توضيحي في plnkr.co أو ما شابه ذلك؟

Narretz سأعطيها فرصة. ولكن هل من المفترض أن يعمل هذا مع رسوم متحركة متداخلة إذا تم تشغيل مجموعة واحدة فقط من الرسوم المتحركة في كل إطار؟

عذرًا ، لا يمكن إعادة إنتاجه في Plunkr.

Narretz هل هناك أي شيء يمكنني القيام به للمساعدة في حل هذه المشكلة؟ إذا كنت ترغب في ذلك ، يمكنني تزويدك ببيانات اعتماد تسجيل الدخول لبيئتنا المرحلية حيث يمكنني إعادة إنتاجها باستمرار.

تحرير: فاتني جزء من المستندات حيث يقول بوضوح أن الجمع بين الرسوم المتحركة الهيكلية مع الرسوم المتحركة للفئة يمكن أن يؤدي إلى الخفقان. لا تهتم بي إذن.

أواجه مشكلات مماثلة على Chrome مع OS X. في حالتي ، يوجد عرضان مع ظروف عرض مميزة (وهي ليست صحيحة أبدًا في نفس الوقت). حتى إذا قمت بتبديل الشرطين مباشرة بعد بعضهما البعض ، فهناك لحظة وجيزة يظهر فيها كلا العنصرين. لا يحدث هذا في جميع تكوينات الصفحة ، ولكنه يحدث باستمرار في حالة واحدة معينة.

لدي أيضًا نفس المشكلة في Chrome على Windows ، باستخدام angular-angular-animate 1.4.12.

يعد حل

أواجه نفس المشكلة في iOS Simulator لنظام iOS 9.3. لقد قمت بتحميل مقطع فيديو يوضح المشكلة: https://youtu.be/C0Lh5B1Lj6k

لقد قمت مؤخرًا بتسخين يدي باستخدام مادة Angular وتم تضمينها في مشروعي الحالي وبدأت في تجربة سلوك الخفقان هذا في Chrome أثناء استخدام ng-if / ng-show. بعد العثور على بعض الدرب والخطأ تسبب في المشكلة بسبب "ngAnimate".

يعمل حل PhilipWallin كحل بديل بالنسبة لي ولست متأكدًا مما لن ينجح في المستقبل.

أضفت ما يلي في CSS واستبدلت "ng-if" إلى "ng-show"
.ng-hide.ng-hide-animate {
العرض: لا شيء!
}

ملاحظة: استخدام الإصدار Angular و ngAnimate v1.5.7

+1

مرحبًا ، أواجه مشكلة مماثلة مع الزاوية 1.5.8 (بعد الترقية للتو من الإصدار 1.12.15).

المشكلة واضحة جدًا في IE11 ، فهي موجودة أيضًا ضمن Chrome ولكن في كثير من الأحيان يكون الانتقال سريعًا للغاية بحيث لا يمكن ملاحظته.

التوجيه الذي أملكه هو عنصر تحكم علامة تبويب يستخدم التضمين لتضمين صفحات علامة التبويب. الوميض الذي أواجهه (والذي يعرض لفترة وجيزة صفحة علامة التبويب النشطة الجديدة والقديمة html جنبًا إلى جنب) هو عندما ينتقل المستخدم بين علامات التبويب (أي بعد التجميع وتحميل القالب). يستخدم الكود ng-show مع علم منطقي لتحديد ما إذا كان سيتم عرض الصفحة أم لا (والتي يكون 1 منها كحد أقصى نشطًا في أي وقت).
إذا قمت باستبدال ng-show بـ ng- إذا لم يكن هناك وميض.

كان العمل الذي كنت أخطط لاستخدامه هو استخدام فئة ng مع نفس العلامة الشرطية ng-show لتنشيط فئة css مخصصة '.myCloak {display: none! important}' (أي نفس css المستخدم بواسطة ng-cloak ) على سبيل المثال
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}" الذي يعمل على حل المشكلة.

سأحاول إنشاء مخطط تفصيلي للتوضيح ولكن قد يستغرق الأمر بعض الوقت.

في غضون ذلك ، سأرفق لقطة شاشة للمشكلة كما تظهر في تطبيقنا ضمن IE11 والفيديو الذي تم التقاطها منه.

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

من خلال تشغيل الفيديو [http://take.ms/czZZV] سترى أنه غير متسق ولكنه يحدث كثيرًا.

لدي نفس المشكلة على chrome 54 مع Angular 1.5.8.

يعمل حل PhilipWallin في الوقت الحالي أيضًا.

أي فكرة عن السبب يمكن أن يكون؟

مرحبًا ، لقد تمكنت من تجميع قطعة كبيرة تظهر هذا السلوك:

[https://plnkr.co/edit/PTrvz8]

إذا قمت بتشغيله ضمن IE11 وقمت بالتبديل بين صفحات علامات التبويب ، فيجب أن تراها. الرمز قبيح بعض الشيء لكنه يظهر المشكلة. إذا قمت بإلغاء التعليق ng-hide-animate override في style.css (يعمل ستختفي المشكلة.

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

لقد رتبت الصندوق قليلاً وأضفت وصفًا ،
https://plnkr.co/edit/l70kaJ
توجد حدود زرقاء وحمراء حول صفحات علامة التبويب المعنية لجعل حركة العرض المزدوجة واضحة (ضمن IE11)

كما اكتشف teterovic في الإصدار رقم 13974 ، يبدو أن هذا السلوك قد تم تقديمه في الإصدار 1.4.5. إذا قمت بتغيير نسخ الزاوي والزاوي المتحرك على القطعة إلى 1.4.4 ، فلن يكون السلوك موجودًا ، بل يصل إلى 1.4.5 ويظهر.

garycuthbert شكرًا على plnkr ، فهو يظهر المشكلة جيدًا (في IE11). سأحقق وأرى ما إذا كان هناك أي شيء يمكننا القيام به.
في هذه الأثناء ، إذا كنت لا تستخدم الرسوم المتحركة فعليًا على العناصر ، فيمكنك classNameFilter لتعطيل الرسوم المتحركة على هذا العنصر: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

مرحبا بالجميع،
لقد قمت بإنشاء تصحيح لمثالgarycuthbert . هل يمكن لجميع الأشخاص المتأثرين بهذه المشكلة اختبار هذا الملف باستخدام الزاوية المتحركة والإبلاغ مرة أخرى إذا اختفت المشكلة أو تم تحسين السلوك؟ https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

مرحبًا ، ربما أقوم بتطبيق التصحيح بشكل غير صحيح ولكني أتلقى الخطأ التالي باستخدام هذا الملف:

لقد حاولت استبدال محتوى ملف angular-animate.js السابق وكذلك تحميل ملف angular-animate-patch.js بشكل صريح ، مع الشكوى من "مزود غير معروف" $$ isDocumentHiddenProvider ''. أنا أركض ضد الإصدار 1.5.8 ، هل فاتني شيء ما؟

مرحبًا garycuthbert لقد قمت في الأصل بربط الملف https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

شكرًا Narretz ، لقد جربت التصحيح الخاص بك وقام بحل المشكلة بالنسبة لي ضمن IE11 ، فهل من المحتمل أن يصل هذا الإصلاح إلى الإصدار 1.5 التالي؟

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

رائع ، شكرًا للإصلاحNarretz سأراقب الإصدار التالي.

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

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

كملاحظة أخيرة ، أعتقد أن هناك مشكلات مماثلة مع خطافات الرسوم المتحركة التي تتضمن ng-include و ui-view. من الصعب للغاية تحديد ذلك ، ولكن نظرًا لأن تطبيقنا يستخدم كلا التوجيهين على نطاق واسع ، فإن التأثير الصافي يكون ملحوظًا تمامًا في إطار IE وبدرجة أقل في Chrome (التأثير هو العرض المختصر لأجزاء doms الحصرية للطرفين ، أي نفس المشكلة
لقد تمكنت من تحسين الموقف عن طريق التحميل المسبق لقوالب التوجيه المخصصة الخاصة بنا واستخدام "القالب" للوصول إليها وعن طريق الرد على أحداث التحميل / التحميل التي يطلقها ng-include و ui-view (باستخدام عرض فئة مخصص: لا شيء! مهم 'لإخفاء العقد ذات الصلة بين التحميل والأحداث المحملة) ولكن المشكلة لا تزال تُرى من حين لآخر.

بعد التراجع عن كل هذا وتحديد فئة استبعاد عن طريق تعيين $ animateProvider.classNameFilter حيث اقترح Narretz أن المشاكل تختفي.

لا نستخدم حاليًا أي رسوم متحركة ولكن من المحتمل أن يتغير هذا في المستقبل القريب ، يمكننا العمل مع classNameFilter لتنشيط المناطق التي نحتاجها بالرغم من ذلك.

Narretz ، لست متأكدًا مما إذا كان بالإمكان تطبيق الإصلاح الخاص بك بشكل عام لتغطية سيناريوهات ng-include & ui-view ، لكن الأعراض تبدو متشابهة بالتأكيد.

الإصلاح "عام" بمعنى أنه ليس في كود التوجيه ngShow / ngHide ، ولكن في منطق الرسوم المتحركة نفسه. ومع ذلك ، يستخدم ngShow / Hide وظيفة رسوم متحركة محددة (فئة مؤقتة) ، والتي لا يتم استخدامها بواسطة ngInclude و ngView. من الصعب تحديد المشكلة معهم دون رؤية مثال.

مرحبا ناريتز ،
لقد كنت أحاول إصلاح هذه المشكلة منذ فترة ووجدت هذا التصحيح هنا والذي بعد تطبيقه تم إصلاح مشكلة الإصدار 1.5.0. بيتا شيء ما ، ولكن ما زلت لا تعمل مع 1.5.8. شكرا على المسار :)

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

لقد جربت هذا أيضًا في الإصدارين 1.5.9 و 1.6.0 ، وهو لا يزال لا يعمل مع التصحيح على أي حال. أي مساعدة ستكون محل تقدير كبير.

شكرا
فهد

سأقوم بمراجعة العلاقات العامة لـ gkalpak بعد الكريسماس ، وبعد ذلك نأمل في الحصول عليها بسرعة.

حاولت في إصدارات أخرى لا تعمل في 1.5.9 و 1.6.1. أي مساعدة / اقتراح سيكون محل تقدير كبير. شكرا
فهد

لا تزال نفس المشكلة مع 1.5.10

واجهت نفس المشكلة ، وأردت محاولة الترقية إلى 1.6.1 من 1.3.x واضطررت إلى الرجوع مرة أخرى إلى 1.4.4. يا له من إحراج لفريق Angular

@ stijn26 ربما تكون قد فعلت شيئًا خاطئًا ويجب أن يكون هذا سؤالاً في stackoverflow ولكن على أي حال:

• 1.6 يحتوي على تغييرات كسر عند مقارنته بـ 1.X-1.5 ، يرجى النظر فيها - يمكنك رؤية التغييرات في سجل التغيير على جيثب (جرب 1.5 instad)
• هل قمت بتحديث جميع الوحدات؟ مثل angular-animate.js للمراجعة المقابلة أو angular.min.js فقط؟ إن لم يكن جربه

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

mmomeni @ stijn26teterovic
في الوقت الحالي ، وجدنا العمل حول تشغيل وإيقاف تشغيل الرسوم المتحركة وهي تعمل بشكل جيد بالنسبة لنا حتى الآن. المثال أدناه. آمل أن يساعدك ذلك يا رفاق أيضًا حتى يجد الفريق الحل الصحيح ؟؟؟

$animate.enabled(false);
    $scope.$on('$destroy',
        function() {
            $animate.enabled(true);
        });

أحصل على هذا الوميض مع ng-show على الزاوية 1.6.3 على Chrome 57 على Windows 7. العرض: لا شيء على .ng-hide.ng-hide-animate يصلح لي.

@ samal84 هل يمكنك تقديم عرض توضيحي؟ لا يمكنني إعادة إنتاج هذا في Chrome 58 مع تحديث plnkr في أول مشاركة إلى 1.6.4.

حسنًا ، يبدو الأمر أشبه بخلل في md-switch لمادة الزاوية ، والآن بعد أن حاولت تقديم عرض توضيحي بسيط :

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

@ samal84 يتم إصلاح ذلك أيضًا عن طريق تعطيل $ animate (الذي تستخدمه مادة الزاوية). عرض:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD؟p=preview