如何使用轉換將元素位置從x1轉換爲x2？

Question

HTML：

<div id="foo"></div> 

CSS：

#foo { width: 100px; height: 100px; background: #f00; } 
.a { -webkit-transition: -webkit-transform 1s linear; -webkit-transform: translateY(100px); } 
.b { -webkit-transition: -webkit-transform 1s linear; -webkit-transform: translateY(50px); } 

的JavaScript：

$(function() { 
    var elm = $('#foo'); 

    var animate = function (className, callback) { 
     elm.addClass(className); 

     setTimeout(function() { 
      elm.removeClass(className) 

      callback(); 
     }, 1000); 
    }; 

    animate('a', function() { 
     animate('b'); 
    }); 
}); 

問題：

在第二次迭代的元素實際上是從以前translatedY移動，而比無翻譯元素狀態。

使用關鍵幀可以工作，但這需要添加更多預定義的CSS類，這不是一個真正的選擇。

Answer 1

我想出的可能的解決方案是使用setTimeout。

$(function() { 
    var elm = $('#foo'); 

    var animate = function (className, callback) { 
     setTimeout(function() { 
      elm.addClass(className); 
     }, 0); 

     setTimeout(function() { 
      elm.removeClass(className) 

      callback(); 
     }, 1000); 
    }; 

    animate('a', function() { 
     animate('b'); 
    }); 
}); 

兩個德梅可以在http://jsfiddle.net/CP8An/和http://jsfiddle.net/CP8An/1/看到。後者是期望的結果。

我不明白爲什麼需要setTimeout - 畢竟，之前定義的類在調用回調之前被刪除。使用setTimeout似乎更像是一種解決方法。這可能有助於處理類似問題的人，儘管我仍然樂於接受其他建議。