CSS 过渡不适用于顶部，底部，左边，右边

我有一种时尚元素

position: relative;
transition: all 2s ease 0s;

Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn't take place, instead, the element moves instantly.

$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});

However, if I change the color property, for example, it changes smoothly.

$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});

造成这种情况的原因是什么? 是否存在不是“过渡性”的属性？

编辑 : 我想我应该提到这不是 jQuery，它是另一个库。代码似乎按预期工作，样式正在添加，但转换只在第二种情况下工作？

147872 次浏览
小开
最佳答案

尝试在 CSS 中为 top设置一个默认值，让它知道在转换之前你想让它从哪里开始:

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

之所以需要这样做，是因为您不能从关键字和 ABC0的默认值是 auto转换。

It is also good practice to 明确指定要转换的内容 (only top instead of all) both for 表现理由 and so you don't transition something else (like color) unintentionally.

小开

也许您需要在 css 规则集中指定 top 值，以便它知道动画化 来自的值。

小开

在我的情况下，div 位置是固定的，添加左边的位置是不够的，它开始工作后才添加显示块

左: 0; 显示: 块;

小开

有没有不是“过渡性”的属性？

答案: 是的。

如果属性没有列出 here，那么它就不是 “过渡期”。

参考资料: 可动画的 CSS 属性

小开

一些与任务无关的事情，但是可能对将来的某个人有关:

对于像素(px) ，如果值为“0”，则可以省略该单元: right: 0和 right: 0px都可以工作。

但是我注意到在 Firefox 和 Chrome 中，这是 没有的秒单元(s)。当 transition: right 1s ease 0s工作时，transition: right 1s ease 0(最后一个值 transition-delay缺少单元 s)执行 没有(然而在 Edge 中 是的工作)。

在下面的示例中，您将看到 right同时适用于 0px和 0，但是 transition只适用于 0s，它不适用于 0。

#box {
border: 1px solid black;
height: 240px;
width: 260px;
margin: 50px;
position: relative;
}
.jump {
position: absolute;
width: 200px;
height: 50px;
color: white;
padding: 5px;
}
#jump1 {
background-color: maroon;
top: 0px;
right: 0px;
transition: right 1s ease 0s;
}
#jump2 {
background-color: green;
top: 60px;
right: 0;
transition: right 1s ease 0s;
}
#jump3 {
background-color: blue;
top: 120px;
right: 0px;
transition: right 1s ease 0;
}
#jump4 {
background-color: gray;
top: 180px;
right: 0;
transition: right 1s ease 0;
}
#box:hover .jump {
right: 50px;
}
<div id="box">
<div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
<div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>


提交答案