javascript - CSS过渡不适用于上，下，左，右(CSS Transition doesn't work with top, bottom, left, right)

Question

I have an element with style(我有风格的元素)

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.(但是，例如，如果我更改color属性，则它会平滑变化。) $$('.omre')[0].on('click',function(){ $$(this).style({color:'red'}); }); What might be the cause of this?(这可能是什么原因？) Are there properties that aren't 'transitional'?(是否有非“过渡性”的属性？) EDIT : I guess I should have mentioned that this is not jQuery, it's another library.(编辑 ：我想我应该提到这不是jQuery，它是另一个库。) The code appears to work as intended, styles are being added, but transition only works in second case?(该代码似乎按预期工作，添加了样式，但是过渡仅在第二种情况下有效？)   ask by php_nub_qq translate from so

Answer 1

Try setting a default value in the css (to let it know where you want it to start out)(尝试在CSS中设置默认值（让它知道您要从哪里开始）)

CSS(的CSS) position: relative; transition: all 2s ease 0s; top: 0; /* start out at position 0 */