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

javascript css css-transitions

2022-08-30 05:09:59

我有一个有风格的元素

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，而是另一个库。代码似乎按预期工作，正在添加样式，但过渡仅在第二种情况下有效？

答案 1

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

断续器

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

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

出于性能原因，最好准确指定要转换的内容（仅而不是），这样您就不会无意中转换其他内容（如）。topallcolor

答案 2

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