开关类阅读

Question

我有基于什么类型是指在添加，删除类，切换定义生效转变的CSS3动画等

所以，我有一个类“flyOff”用于;当添加时，使元素向上飞到左侧。当它被移除时，它会从该位置向下飞/向下移动。

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

这很好。

但是...

我需要把它背下来，从不同的位置（特别是从右上方）。

当我I 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解决方案。任何指针？

---

更新：什么工作（虽然不是理想的）通过@ 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。