CSS 3：更正翻译操作的“transition-property”

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 值设置为 @987654330 @。

我想要的是将此 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>