開關類閱讀

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。