CSS 过渡不适用于顶部、底部、左侧、右侧

Question

我有一个带有样式的元素

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

然后我想在单击它后平滑地更改它的位置，但是当我添加样式更改时，过渡不会发生，相反，元素会立即移动。

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

但是，例如，如果我更改color属性，它会顺利更改。

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

可能是什么原因造成的？是否有不是"过渡"的属性？

编辑：我想我应该提到这不是jQuery，而是另一个库。代码似乎按预期工作，正在添加样式，但过渡仅在第二种情况下有效？

Answer 1

尝试在 CSS 中为top设置默认值，以便在转换之前让它知道您希望它从哪里开始：

.CSS

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

需要这样做的原因是您无法从关键字转换，并且top的默认值为 auto 。

出于

性能原因，准确指定要转换的内容(仅top而不是all(也是一种很好的做法，这样您就不会无意中转换其他内容(如color(。

Answer 2

也许您需要在 css 规则集中指定一个顶级值，以便它知道要从哪个值进行动画处理。

Answer 3

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

left:0; display:block;

Answer 4

与 OP 无关的东西，但将来可能与其他人无关：

对于像素(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>

Answer 5

是否有不是"过渡"的属性？

答：是的。

如果此处未列出该属性，则它不是"过渡性"。

参考：可动画 CSS 属性