0

問題は、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/

4

1 に答える 1

0

更新- これを試してください：

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

フィドル: http://jsfiddle.net/D5d9e/6/

これは機能します...何らかの理由で。

于 2013-06-17T16:52:23.897 に答える