html - CSS 3 : Correct "transition-property" for translate operation

Question

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

$('#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>

它按预期工作，我为 所有 过渡(在本例中为 translate 以及 hover 获得了平滑的 0.5 秒动画) 因为我已经将 css 中的 transition-property 值设置为 all。

我想要的是将这 0.5 秒的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

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

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

.pushObject {
    transform: translate(250px, 0px);
    -webkit-transform: translate(250px, 0px);
    -ms-transform: translate(250px, 0px);
    -o-transform: translate(250px, 0px);
    -moz-transform: translate(250px, 0px);
}

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