CSS 3：正確的「轉換屬性」的翻譯操作

Question

我使用下面的代碼來實現一個簡單的translation點擊時的對象。

HTML

<div id="div1"></div> 

$('#div1').on('click', function() { 
    $(this).toggleClass('pushObject'); 
}); 

它按預期工作CSS

#div1 { 
    width:30px; 
    height:30px; 
    background-color:green; 
    cursor:pointer; 
    transition: all 0.5s ease; 
} 
#div1:hover { 
    background-color:red; 
} 

.pushObject { 
    transform: translate(250px, 0px); 

} 

的JavaScript（jQuery的），一nd我得到了一個平滑的0.5秒動畫all轉換（在這種情況下translate以及hover），因爲我已經將css的transition-property值設置爲all。

我想要的僅限於這個0.5s Transition到translate而不是hover。

這可以通過在css中設置正確的transition-property來實現，但我無法找到正確的值。

那麼這裏transition-property的正確值是什麼，以便動畫僅適用於translate而不適用於其他transition。

這是JsFiddle。

Answer 1

在您的transform: translate(250px, 0px)聲明中，該屬性名爲transform，該屬性的值爲translate(250px, 0px)函數。

的transition-property的正確值，因此transform是：

#div1 { 
    width:30px; 
    height:30px; 
    background-color:green; 
    cursor:pointer; 
    transition: transform 0.5s ease; 
} 

Updated fiddle