135

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 the second case?

leonheess
  • 16,068
  • 14
  • 77
  • 112
php_nub_qq
  • 15,199
  • 21
  • 74
  • 144
  • 2
    Assuming $$ is an alias for jQuery, doing [0] will return a native dom object (as opposed to a jquery object) and not have any `.on()` method. If not - what is $$? – xec Dec 04 '13 at 18:48
  • None of that is valid, if you're using jQuery there's nothing called style(), and in native JS, it surely doesn't work like that. – adeneo Dec 04 '13 at 18:49
  • 1
    There is a set of rules that are transition-able. see [W3 Specification](http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#properties-from-css-) – Goldentoa11 Dec 04 '13 at 18:51
  • @Goldentoa11 `top` appears to be in the list, which eliminates my doubt about `top` not being available for transitions. – php_nub_qq Dec 04 '13 at 18:53
  • 3
    @php_nub_qq Check adaneo's answer and my comment to it, by the looks of it you need to start out with a `top` value set (to 0 for instance) before you change it (to 200 or whatever) – xec Dec 04 '13 at 18:54
  • Yeah, I saw that too. I was just posting that in the comments since you had asked if there was a list of some sort, but seemed an answer was overkill. – Goldentoa11 Dec 04 '13 at 18:55
  • @xec Thanks to your fiddle I figured out the problem. It was because in my css I wasn't setting `top` to `0`, I was just assuming that it wouldn't matter. After initializing `top:0` the transition now works! You can post that as an answer, because it's mostly your credit! `:P` – php_nub_qq Dec 04 '13 at 18:58
  • Try this `$(this).animate({top: 200});` and `$(this).animate({backgroundColor: 'red'});` – Aslam khan Dec 19 '22 at 17:11

5 Answers5

260

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:

CSS

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

The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.

It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.

xec
  • 17,349
  • 3
  • 46
  • 54
19

Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from.

sarahholden
  • 641
  • 7
  • 14
3

In my case div position was fixed , adding left position was not enough it started working only after adding display block

left:0; display:block;

Sameh
  • 1,318
  • 11
  • 11
3

Something that is not relevant for the OP, but maybe for someone else in the future:

For pixels (px), if the value is "0", the unit can be omitted: right: 0 and right: 0px both work.

However I noticed that in Firefox and Chrome this is not the case for the seconds unit (s). While transition: right 1s ease 0s works, transition: right 1s ease 0 (missing unit s for last value transition-delay) does not (it does work in Edge however).

In the following example, you'll see that right works for both 0px and 0, but transition only works for 0s and it doesn't work with 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>
LWChris
  • 3,320
  • 1
  • 22
  • 39
2

Are there properties that aren't 'transitional'?

Answer: Yes.

If the property is not listed here it is not 'transitional'.

Reference: Animatable CSS Properties

Robert Shaw
  • 547
  • 4
  • 11