webkit translateX 动画正在回滚到初始位置

Question

我正在尝试为移动 webkit 创建一个图片库，

它实际上足够快的唯一方法是使用硬件加速的 translateX 。

我的问题是 div 在动画结束时收回了它的初始位置。我在左侧按钮上添加了 slideGalLeft 类。到动画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%); }
}

Answer 1

不要为此使用 webkit 动画，因为它会在播放后恢复到默认值。而是定义

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%);
}

并使用 Javascript，设置 -webkit-transform: translateX(100%); 或向您的元素添加一个 CSS 类以设置最终转换值，webkit 将正确地为其设置动画