CSS webkit translateX 动画正在回滚到初始位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2017851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkit translateX animation is rolling back to initial position
提问by Cedric Dugas
I am trying to do a images gallery for mobile webkit,
我正在尝试为移动 webkit 制作一个图片库，
The only way it is actually fast enough is using the hardware accelerated translateX .
它实际上足够快的唯一方法是使用硬件加速 translateX 。
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
我的问题是 div 在动画结束时收回其初始位置。我在左侧按钮上添加了点击的 slideGalLeft 类。到动画div
You can see an example here, in the callback events section: http://position-absolute.com/jqtouch/demos/main/#home
你可以在这里看到一个例子，在回调事件部分：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%); }
}
采纳答案by Guillaume Esquevin
Do not use webkit animation for this as it comes back to the default values once played. Instead define
不要为此使用 webkit 动画，因为它会在播放后恢复为默认值。而是定义
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
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
并使用 Javascript，-webkit-transform: translateX(100%);为您的元素设置或添加一个 CSS 类，该类设置最终的转换值，webkit 将正确地为其设置动画
回答by Jason T Featheringham
Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).
纪尧姆的回答很棒。但是，如果您正在寻找硬件加速，则必须让 webkit 引擎知道您想要 3D 渲染（使硬件加速处于活动状态的原因）。
According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:
根据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);
}
Follow Guillaume's advice beyond that.
除此之外，请遵循纪尧姆的建议。
回答by hallodom
Use:
用：
-webkit-animation-fill-mode: none/backwards/forwards/both;
This allows you to define at what end of your animation the element remains when the animation is finished.
这允许您定义动画完成时元素保留在动画的哪个结尾。
回答by Jim Yu
I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:
我能够通过在动画结束时添加“显示：无”样式来使其工作。使用以下 CSS：
.paused {
-webkit-animation-play-state: paused;
}
.hiddendiv {
display:none;
}
Then in your jQuery code:
然后在你的 jQuery 代码中：
$('div.sideimage').click(
function () {
$(this).removeClass("paused").delay(2000).queue(
function(next) {
$(this).addClass("hiddendiv");
next();
}
);
}
);
Should work!
应该管用！
