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

Question

我有一个 CSS3 动画，它根据添加、删除、切换等类中定义的内容生效。

所以，我有一个类“flyOff”，它用于；添加后，使元素向上和向左飞。当它被移除时，它会从那个位置向下飞/向下过渡。

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

这很好。

但是……

我需要从不同的位置将它拉下来(特别是从右上角)。

当我 removeClass flyOff 它从左上角向下飞(转换)，正如用 flyOff 定义的那样。

问题:我需要它从右上角向下过渡(飞下)。

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

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

但是当我执行上述操作时，它仍然会从 flyOffr 位置(左上角)向下飞 - 因为我猜它在附加所需的 flyOffr 之前就被删除了。

尝试使用 .toggleClass

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

flyOffr 没有被上面的内容读取..

问题不在于 CSS 边距或坐标——因为当我在控制台中添加和删除类时； eg. 添加 flyOffr 它会根据需要飞下来我只需要一个解决方案来从两个类转换。没有 flyOff 在 flyOffr 之前读取。

所以，我想我需要一个 .switchClass 解决方案。有什么指点吗？

---

更新:通过@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 这样的动画库.