CSS Transition doesn't work with top, bottom, left, right

javascript css transition
php_nub_qq picture php_nub_qq · Dec 4, 2013 · Viewed 104.3k times · Source

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.

$$('.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. The code appears to work as intended, styles are being added, but transition only works in second case?

Answer

xec picture xec · Dec 4, 2013

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

CSS

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

Related questions

CSS3 transition events

Are there any events fired by an element to check wether a css3 transition has started or end?

Read More
How to get value of translateX and translateY?

I want to get translateY value from the in-line css with the JavaScript. Here is the in-line value: style ="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -13361.5px) scale(1) translateZ(0px);" These code give to me the total …

Read More
How do i reverse a CSS3 animation on the first iteration (and not the second)

I have setup a CSS3 animation like this: @-webkit-keyframes slidein { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } How do i reverse this animation on a class definition? For example: .slideinTransition { -webkit-animation-name: slidein; -webkit-animation-direction: alternate; } This will reverse the animation on the …

Read More