webkit translateX动画回滚到初始位置 [英] webkit translateX animation is rolling back to initial position

问题描述

我想为移动webkit做一个图片库，

I am trying to do a images gallery for mobile webkit,

唯一的方法是使用硬件加速的translateX。

The only way it is actually fast enough is using the hardware accelerated translateX .

我的问题是div在动画结束时收回其初始位置。我在左边的按钮添加slideGalLeft类cliking。到动画div

My problem is that the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div

你可以在回调事件部分看到一个例子：
http://position-absolute.com/jqtouch/demos/main/#home

You can see an example here, in the callback events section: 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%); }
}

推荐答案

为此，它回到默认值一旦播放。
而是定义

Do not use webkit animation for this as it comes back to the default values once played. Instead define

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

并使用Javascript，设置 -webkit-transform ：translateX（100％）; 或者添加一个CSS类到你的元素，设置最终的转换值，webkit将动画化它。

and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly

这篇关于webkit translateX动画回滚到初始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！