переключатель класса без предыдущего прочитаются

Question

У меня есть CSS3 анимации с переходами, которые вступают в силу на основе того, что определяется в классах, которые добавляются, удаляются, переключаемых и т.д.

Итак, у меня есть класс «flyOff» который используется; при добавлении элемент взлетает вверх и влево. Когда он удаляется, он улетает вниз/переходит с этой позиции.

$('.exchange-tablet').addClass('transTime flyOff'); 
$('.exchange_text').fadeOut(); 

Это прекрасно.

Однако ...

мне нужно вернуть его обратно вниз, с другой позиции (в частности, с правом верхнем углу).

Когда я removeClassflyOff, он пролетает (переходит) вверху слева, как определено flyOff.

Проблема: мне нужно, чтобы он спустился вниз (спустился) сверху справа.

Итак, я создал класс .flyOffr с указанными координатами верхнего правого.

$('.exchange-tablet').removeClass('flyOff').addClass('flyOffr'); 

Но когда я выше, он все еще летит вниз от flyOff положения (вверху слева) - потому что я предполагаю, что удаляется до того, как нужно flyOffr прилагается.

Покушение с .toggleClass

$('.exchange-tablet').toggleClass('flyOff flyOffr').addClass('complete'); 

flyOffr не читался с выше ..

Проблема не с CSS полями или координаты - потому что, когда я добавлять и удалять классы в консоль; например. Добавить flyOffr он полетит по мере необходимости Мне просто нужно решение для перехода от двух классов. Без flyOff принести читать перед flyOffr.

Итак, я думаю, что мне нужно решение .switchClass. Любые указатели?

---

Update: То, что работало (хотя и не так идеально) с помощью @ shash7 (но с некоторыми небольшими щипания)

$('.exchange-tablet').removeClass('flyOff'); 
      setTimeout(function() { 
      $('.exchange-tablet').addClass('flyOffr'); 
      $('.exchange-tablet').removeClass('flyOffr'); 
    }, 600); 

Answer 1

Попробуйте это (предполагается, что анимация занимает 250 мс):

$('.exchange-tablet').removeClass('flyOff'); 
setTimeout(function() { 
    $('.exchange-tablet').addClass('flyOffr'); 
}, 250); 

Но я настоятельно рекомендую вам не идти по этому маршруту. Вместо того, чтобы создавать классы для перемещения элементов вокруг, добавьте преобразование css и функцию, чтобы добавить его в элемент для программно перемещающихся элементов.

Или еще лучше, используйте анимационную библиотеку, такую ​​как movejs.