CSS Transition不能与顶部，底部，左，右一起使用 [英] CSS Transition doesn't work with top, bottom, left, right

问题描述

我有一个有风格的元素

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'});
});

但是如果我改变 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 ：我想我应该提到这不是jQuery， 。

EDIT: I guess I should have mentioned that this is not jQuery, it's another library. The code appears to work as intended, styles are being added, but transition only works in second case?

推荐答案

尝试设置默认值css中的值（以让它知道您要从何处开始）

Try setting a default value in the css (to let it know where you want it to start out)

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

这篇关于CSS Transition不能与顶部，底部，左，右一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！