CSS 3:纠正翻译操作的"过渡属性"

Question

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

HTML

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

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)

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

它按预期工作,我得到一个平滑的0.5秒动画all的转换(在这种情况下translate以及hover),因为我已将transition-propertycss中的值设置为all.

我想要的是将这个0.5s限制Transition为translate仅,而不是hover.

这可以通过transition-property在css中设置正确来实现,但我无法找到正确的值.

那么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;
}

更新了小提琴