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

它按预期工作，我得到了all转换的平滑0.5秒动画（在本例中为translate以及hover），因为我设置了{{1 css中的值为transition-property。

我想要的是仅将此0.5s all限制为Transition，而不是translate。

这可以通过在css中设置正确的hover来实现，但我无法找到正确的值。

那么transition-property的正确值是什么，以便动画仅适用于transition-property，而不适用于任何其他translate。

这是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

CSS 3：纠正翻译操作的“过渡属性”

1 个答案: