CSS3 translateX confusion

Question

The problem is, that translateX is not changing it's position right before animating. In the example problematic slide is #slide2, i'm changing it's position before animating and it still animate from the wrong side.

How to fix that behavior? Using css left property instead is fixing this, but i want to use translateX.

Thanks.

html:

<div id="slide1"></div>
<div id="slide2"></div>

css:

div {
    position:absolute;
    left:0px;
    top:0px;
    background:red;
    width:100%;
    height:300px;
    -webkit-transition: all 0.4s linear;
}
#slide2 {
    background:blue;
    -webkit-transform: translateX(100%);
}

javascript:

$('#slide2')
    .css('-webkit-transition','none')
    .css('-webkit-transform','translateX(-100%)');

$('#slide1').css('-webkit-transform','translateX(100%)');

$('#slide2')
    .css('-webkit-transition','all 0.4s linear')
    .css('-webkit-transform','translateX(0%)');

jsfiddle playground: http://jsfiddle.net/D5d9e/

If you're not getting the answers you want, it might be because people don't understand your question. — pjmorse, Jun 17 '13 at 16:57
Isn't code is clear enough? And my answer too? Ask what is not understandable, because I don't know. — Somebody, Jun 17 '13 at 16:58
If the code isn't doing what you want it to do, you will need to explain what you want it to do. If your code does X, but you want Y, you need to *clearly* explain Y. — pjmorse, Jun 17 '13 at 17:00

tb11 · Answer 1 · 2013-06-17T17:10:16.783

0

Updated - Try this:

$('#slide2')
    .css('-webkit-transition','none')
    .css('-webkit-transform','translateX(-100%)')
    .css('-webkit-transform'); // wtf happens here

Fiddle: http://jsfiddle.net/D5d9e/6/

This works... for some reason.

edited Jun 17 '13 at 17:10

answered Jun 17 '13 at 16:52

tb11

3,056
21
29

no no , you don't get it, initial position SHOULD be 100%, because previously it were animated from left to right. – Somebody Jun 17 '13 at 16:54
Why it's not changing it to -100% as i'm telling it to do, before animating? – Somebody Jun 17 '13 at 16:55
I have found a fix as well, it's strange. Not sure why it's happening this way. It seems that transform calls are asynchronous and first call gets overwritten by second right away and is ignored? http://jsfiddle.net/D5d9e/8/ – Somebody Jun 17 '13 at 17:06
Ahaha your answer is even more creepy. :D I'm even more confused. Any guru here, who can explain that? :D – Somebody Jun 17 '13 at 17:09
That makes sense now actually. All those `.css()` calls are happening in one go, so the translation to 0% will immediately override the translation to -100%. They're all synchronous, actually. But that still doesn't explain why my example works! – tb11 Jun 17 '13 at 17:10

CSS3 translateX confusion

1 Answers1