CSS 3：正确的用于翻译操作的“过渡属性”

Question

我正在使用以下代码来实现单击对象时的简单translation。

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

#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);
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1"></div>

[它按预期工作，并且我为all过渡（在这种情况下为translate以及hover）获得了平滑的0.5秒动画，因为我将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