html – CSS 3：纠正翻译 *** 作的“过渡属性”

概述我使用以下代码实现对象单击时的简单转换. HTML <div id="div1"></div> CSS #div1 { width:30px; height:30px; background-color:green; cursor:pointer; transition: all 0.5s ease;}#div1:hover { backgrou 我使用以下代码实现对象单击时的简单转换.

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秒动画,因为我已将CSS中的Transition-property值设置为all.

我想要的是将此0.5s Transition限制为仅翻译,而不是悬停.

这可以通过在CSS中设置正确的Transition属性来实现,但我无法找到正确的值.

那么Transition-property的正确值是什么,这样动画才适用于仅转换而不适用于任何其他转换.

这是一个JsFiddle.

解决方法 在您的transform：translate(250px,0px)声明中,该属性称为transform,该属性的值是translate(250px,0px)函数.

因此,Transition-property的正确值会变换：

#div1 {    wIDth:30px;    height:30px;    background-color:green;    cursor:pointer;    Transition: transform 0.5s ease;}

Updated fiddle

总结

以上是内存溢出为你收集整理的html – CSS 3：纠正翻译 *** 作的“过渡属性”全部内容，希望文章能够帮你解决html – CSS 3：纠正翻译 *** 作的“过渡属性”所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。