مشكلة الفاصل الزمني لـ JS وAnimate.css

Question

أنا أستخدم animate.css للخلاصة.لدي خلاصة باسم div تستخدم فئة SlideInLeft، وتظل لمدة 3 ثوانٍ، ثم تستخدم فئة FadeOut.في هذه المرحلة، أحتاج إلى تغيير محتوى القسم والبدء من جديد.وهنا ما لدي:

لغة البرمجة:

<div id="feed"></div>

شبيبة:

var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
    ++wIndex;
    if (wIndex >= myCars.length) {
        wIndex = 0;
    }   
    $('#feed').removeClass('animated slideInLeft');
    $('#feed').addClass('animated fadeOut').addClass('hidden');
    $('#feed').text(myCars[wIndex]);
    $('#feed').removeClass('animated fadeOut').removeClass('hidden');
    $('#feed').addClass('animated slideInLeft');
}, 3000);

http://jsfiddle.net/tjfo/5a3SL/

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

شكرًا!

Answer 1

أعتقد أنك تتطلع إلى إزالة animated و slideInLeft الطبقات قبل تطبيق الطبقات اللاحقة.ربما قم بإزالة هذه الفئات على الفور، ثم بعد انتهاء المهلة، 25ms, ، افعل بقية المنطق.

هنا عرض توضيحي: http://jsfiddle.net/5a3SL/3.

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

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

هناك طريقة أخرى للتعامل مع هذا وهي تعيين مهلة في نهاية الحلقة تكون على الأقل بنفس طول الرسوم المتحركة (الشريحة الداخلية) وإزالة الفئات غير الضرورية بعد ذلك.