问题是,translateX
在动画之前没有改变它的位置。在示例中有问题的幻灯片是 #slide2
,我在设置动画之前更改它的位置,但它仍然从错误的一侧设置动画。
如何解决该行为?使用 css left
属性来解决这个问题,但我想使用 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 Playground : http://jsfiddle.net/D5d9e/
最佳答案
已更新 - 试试这个:
$('#slide2')
.css('-webkit-transition','none')
.css('-webkit-transform','translateX(-100%)')
.css('-webkit-transform'); // wtf happens here
fiddle :http://jsfiddle.net/D5d9e/6/
这有效...出于某种原因。
关于javascript - CSS3 translateX 困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17152698/