我正在为移动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会正确地动画化
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
