一段时间后 JQuery/CSS 动画中断答案

【问题标题】：JQuery/CSS animation brekas after a while一段时间后 JQuery/CSS 动画中断
【发布时间】：2019-11-25 08:11:15
【问题描述】：

我已经用 jQuery 和 CSS 构建了一个非常简单的动画。我只是用 jquery 转换对象，它本身的转换是一个 css 转换。它按预期工作，但如果我切换浏览器选项卡并稍后再次返回该站点，动画正在做疯狂的事情。盒子从右到左飞得很快，但动画应该是从左到右。

这就是动画的工作原理：

 $('#importance-healthy-text').css({ 'transform': 'translateX(1000px)', 'opacity': '0' });
        $('#importance-healthy-text').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',
            function (e) {
                $('#importance-healthy-text').addClass('hidden');
                $('#importance-healthy-text').css({ 'transform': 'translateX(-1000px)', 'opacity': '0' });
                $(this).off(e);
                $('#importance-nachhaltig-text').removeClass('hidden');
                setTimeout(function () {
                    $('#importance-nachhaltig-text').css({ 'transform': 'translateX(0px)', 'opacity': '1' });
                }, 20);
            });

查看这个 plunker 的完整代码：

https://plnkr.co/edit/oHrvz1xwhxJ25XOOidpQ?p=preview

如果有人知道我该如何解决这个问题，那就太酷了！

【问题讨论】：

为什么不做完整的JS动画呢？我猜 CSS 或 JS 动画在选项卡切换时暂停，然后，当您返回时，它们会不同步
这是一个很好的观点。使用 css 和 JQuery 只是一个想法，而且很容易做到
谢谢，我已经更改了动画，现在只使用 jquery。现在可以了。
我会添加一个答案，如果我的建议有帮助，您可以将其设置为已接受:)

标签： javascript jquery css-transitions

【解决方案1】：

您的问题来自切换选项卡时暂停的 CSS 或 JS 动画。当您返回带有动画的选项卡时，动画帧将不同步，因此您会得到该结果。

仅在 JS 中使用动画会对您的情况有所帮助。

【讨论】：