switch class without the previous being read

Question

I have a CSS3 animation with transitions that take effect based on what is defined in classes that are added, removed, toggled, etc.

So, I have a class 'flyOff' which is used to; when added, make the element fly up and to the left. When it is removed it flys down / transitions down from that position.

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

This is fine.

However...

I need to bring it back down, from a different position (specifically from the top right).

When I removeClass flyOff it flys (transitions) down from the top left as that is defined with flyOff.

Problem: I need it to transition down (fly down) from the top right.

So, I created class .flyOffr with those defined coordinates of top right.

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

But when I do the above, it still flys down from the flyOff position (top left) - because I guess that is removed before the needed flyOffr is attached.

Attempt with .toggleClass

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

flyOffr wasn't being read with the above..

The problem is not with CSS margins or coordinates -- because when I add and remove the classes in the console; eg. Add flyOffr it flys down as needed I just need a solution to transition from the two classes. Without flyOff bring read before flyOffr does.

So, I'm thinking I need a .switchClass solution of sorts. Any pointers?

---

Update: What worked (though not as ideal) via @shash7 (but with some slight tweaking)

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

Answer 1

Try this(assuming your animation takes 250ms):

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

But I highly recommend you don't go down this route. Instead of making classes for moving elements around, add transformation css and a function to add it to the element for programmatically moving elements around.

Or even better, use an animation library like movejs.