jquery - 切换类而不读取先前的类

我有一个CSS3动画，其过渡会根据添加，删除，切换等的类中的定义生效。

因此，我有一个习惯于使用的类“ flyOff”；添加后，使元素向上飞向左侧。移除后，它会从该位置向下飞行/向下过渡。

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

这可以。

然而...

我需要将其从另一个位置放回去（特别是从右上方）。

当我removeClass flyOff时，它按照flyOff的定义从左上角向下飞行（过渡）。

问题：我需要它从右上角向下过渡（向下飞行）。

因此，我使用定义的右上角坐标创建了类.flyOffr。

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

但是，当我执行上述操作时，它仍然会从flyOff位置（左上角）向下飞行-因为我猜想在附加所需的flyOffr之前将其删除。

尝试使用.toggleClass

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

上面的内容没有读取flyOffr。

问题不在于CSS边距或坐标-因为当我在控制台中添加和删除类时；例如。添加flyOffr它会根据需要下降，我只需要一个解决方案即可从这两个类过渡。如果没有flyOff，请先读取flyOffr。

所以，我在想我需要一种.switchClass解决方案。有指针吗？



更新：通过@ shash7起作用了（尽管不是很理想）（但做了一些细微调整）

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

最佳答案

试试看（假设动画需要250毫秒）：

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

但我强烈建议您不要走这条路。无需创建用于四处移动元素的类，而是添加转换css和将其添加到元素中以编程方式移动元素的函数。

甚至更好的是使用movejs之类的动画库。

关于jquery - 切换类而不读取先前的类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30646518/