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将为其设置正确的动画

Answer 2

Guillaume的回答很棒。但是，如果您正在寻找硬件加速，您必须让webkit引擎知道您想要3D渲染（使硬件加速活跃的原因）。

根据http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell，这是通过将translateZ（0）添加到您的规则来完成的，如下所示：

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

除此之外，请遵循纪尧姆的建议。

Answer 3

使用：

-webkit-animation-fill-mode: none/backwards/forwards/both;

这允许您定义动画结束时元素保留在动画的哪一端。

Answer 4

我能够通过在动画结束时添加“display：none”样式来使其工作。使用以下CSS：

.paused {
    -webkit-animation-play-state: paused;
}

.hiddendiv {
    display:none;
}

然后在你的jQuery代码中：

$('div.sideimage').click(
    function () {
        $(this).removeClass("paused").delay(2000).queue(
            function(next) {     
                $(this).addClass("hiddendiv");     
                next();
            }
        ); 
    }
);

应该工作！

webkit translateX动画正在回归初始位置

4 个答案: