我正在为移动webkit做一个图像库,
唯一的办法就是使用硬件加速的translateX.
我的问题是,在动画结束时,div会恢复其初始位置.我在左边的按钮上添加了slideGalLeft类cliking.到动画div
您可以在回调事件部分中看到一个示例：
http://position-absolute.com/jqtouch/demos/main/#home
.slideGalLeft {
-webkit-animation-name: slideColis;
}
@-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
解决方法
不要使用webkit动画,因为它返回到一旦播放的默认值.
而是定义
而是定义
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
并使用Javascript,或者设置-webkit-transform：translateX(100％);或者添加一个CSS类到你的元素,设置最终的变换值,并且webkit会正确地动画化
