javascript - CSS3 translateX 混淆

Question

问题是，这translateX并没有在动画之前改变它的位置。在示例有问题的幻灯片中#slide2，我在制作动画之前更改了它的位置，但它仍然从错误的一侧制作动画。

如何解决这种行为？使用 cssleft属性来解决这个问题，但我想使用translateX.

谢谢。

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 游乐场：http: //jsfiddle.net/D5d9e/

Answer 1

更新- 试试这个：

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

小提琴：http: //jsfiddle.net/D5d9e/6/

这工作......出于某种原因。