عبر متصفح مسج الانتقال الرسوم المتحركة؟

Question

هل هناك أي مسج 1.3 الرسوم المتحركة التحولات التي تعمل في كل من فايرفوكس 3 و IE7؟

ولدي جدول مع عدة صفوف الجدول (25 أو أكثر)، مع بعض الصفوف بدءا سرية (هذه الصفوف جميعا فئة المشتركة؛ في هذا المثال، انها ".hidden"). في رأس الجدول هو "أكثر مشاهدة" الارتباط الذي لا بد عبر. انقر () إلى وظيفة التي سوف تظهر الصفوف المخفية، ثم قم بتغيير "مشاهدة المزيد" ل"عرض أقل" وتغيير. انقر () ل وظيفة أن يفعل العكس.

في كل وظيفة. انقر ()، وهناك خط مثل

$(this).parents("tbody").children("tr.hidden").show();

ومع. تظهر () محل مع .hide () لوظيفة "عرض أقل".

ولكن، إذا حاولت استبدال. تظهر () /. اخفاء () مع .fadeIn () /. الاختفاء التدريجي ()، IE يجعل أنها متطابقة تقريبا. تظهر () /. اخفاء () باستثناء ما يتطلبه الأمر دقيقة ل.hide () نافذة المفعول. لا الرسوم المتحركة الحقيقي هناك. أقل شأنا في IE، على الرغم من أنه يعمل فايرفوكس كبير.

إذا أنا أحاول أن استخدام .slideDown () /. slideUp ()، فمن janky بالمثل في IE، كونها مماثلة تقريبا ل. تظهر () /. اخفاء () إلا مع وجود تأثير ينبض غريب فقط بعد الانتهاء من المرحلة الانتقالية. فايرفوكس 3 يغص بها على أنها كذلك، على ما يبدو مجرد نسيان عرض صف من صفوف الجدول التي تظهر وجعل كل شيء يبدو فظيعا.

وحتى لا تمتص الرسوم المتحركة فقط في IE7؟ هل هناك أي طريقة لجعل الانتقال رشيقة وناعمة في هذه الحالة التي ستعمل في كل المتصفحات؟

Answer 1

ووفقا ل الصفحة التوافق مسج ل هذا النوع من الشيء خطأ ويجب الإبلاغ عنها.

Answer 2

وفي كثير من الأحيان وجود العديد من والرسوم المتحركة المتزامنة يمكن أن يكون من الصعب على IE. محرك جافا سكريبت ليست مجرد أي مكان بالقرب من سفاري أو فايرفوكس أو كروم. وهذا ينطبق على IE6 و IE7. أنا لم يعمل مع IE8 حتى الان.

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

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

وعلى أي حال، عندما يتعلق الأمر الرسوم المتحركة، ومحاولة التفكير في الأشياء جافا سكريبت يحتاج إلى حساب للرسوم المتحركة أن يحدث. التعتيم والارتفاع، ارتفاع حسابها (عرض العنصر + الحدود + الحشو)، موقف الشاشة، كلها أماكن جيدة للبدء.

وفي كثير من الأحيان، يمكنك ان ترى في الواقع ما مسج هو إضافة إلى DOM مع بدء الرسوم المتحركة (باستخدام الحرائق ) . مثل، على الرسوم المتحركة التعتيم، يمكنك معرفة نمط = "التعتيم: 1؛" إضافتها مباشرة قبل العد التنازلي ل0 يبدأ.

Answer 3

وأود أن لا يكون أكثر من اللازم واضح عند الحديث عن العروض عبر المتصفحات. بكل صراحة، لقد رأيت بعض الرسوم المتحركة شبيبة الثقيلة من شأنها أن تجعل بكت بكاء، في حين FF وIE التعامل معها بشكل جيد.

وسيكون لديك فقط للنظر أن المتصفحات ومختلفة CSS و JS تطبيقات التي تجعل في وقت ما من الصعب توجيه أصابع الاتهام إلى الجاني وراء الأداء بطيئا الخاص بك.

وخذ IE. إذا كان لديك 4000x4000 عنصر مستوى الكتلة و2X2 شفافة مجموعة اف تكرار، في كل مرة كنت، لا سمح الله، حرك عنصر IE سوف إعادة رسم الصورة المتحركة 2X2 وحساب ألفا لكل واحد، 2000 مرات. FF إما تخزين خلفية أو لديه إعادة رسم مختلفة بشكل كبير، في كلتا الحالتين الأداء هي لا تضاهى. ولم يذكر البيان أنه في الدليل، عليك أن تكون حذرا كيف وماذا فعل بك.