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

Question

我已经建立了一个真正简单的动画与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);
            });

查看完整代码的插入器：

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

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

Answer 1

您的问题来自切换选项卡时暂停的CSS或JS动画。当您返回到包含动画的选项卡时，动画帧将被取消同步，因此您将获得该结果。

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