jQuery / CSS 动画 - FF 中的暂停和 Chrome 跳回并开始不正确答案

【问题标题】：jQuery / CSS Animation - Pause in FF and Chrome jumps back and start is not correctjQuery / CSS 动画 - FF 中的暂停和 Chrome 跳回并开始不正确
【发布时间】：2015-01-28 17:39:56
【问题描述】：

在 IE 和 Safari 中，移动的进度条的暂停和恢复效果很好，但是在 Firefox 和 chrome 中，当您点击暂停时，它不会在正确的时间暂停，而是似乎跳回然后停止，当您最初开始动画，它不是从顶部开始，而是稍微提前一点。

真的很想解决这个问题，所以它已经完成但无法解决，如果有人可以帮助我解决问题，那就太好了。

要启动它，请点击粉红色的大圆圈

FIDDLE：http://jsfiddle.net/uj4e5cw0/5/ - 当你开始玩它时，你会明白我的意思。

JS：

var playing = false;

    $(document).ready(function () {

        var animation = new TimelineMax();
        var svgPaths = $("#ring");

        for (var x = 0; x < svgPaths.length; x++) {
            var path = svgPaths[x];
            var pathDimensions = path.getTotalLength();
            var strokeWidth = path.getAttribute("stroke-width");
            path.style.strokeDasharray = (pathDimensions) + " " + (pathDimensions);
            path.style.strokeDashoffset = (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
            //path.style.strokeDashoffset = (/Firefox/i.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
            animation.add(TweenMax.to(path.style, 20, {
                strokeDashoffset: 0, onUpdate: function () {
                    var n = document.createTextNode(' ');
                    document.body.appendChild(n);
                    document.body.removeChild(n);
                }
            }), (x > 0) ? "-=0.8" : "");
        }

        $(document).on('click','#pause', function(e) {
            $(svgPaths).attr("class", "paused");
            animation.pause();
        });

        $(document).on('click', '#resume', function (e) {
            $(svgPaths).attr("class", "active");
            animation.resume();
        });

        $(document).on('click', '#restart', function (e) {
            //$(svgPaths).attr("class", "");
            //$(svgPaths).attr("class", "active");
            animation.restart();
        });

        $(document).on('click', '#loader', function (e) {

            if (!playing) {
                $("svg path").attr("class", "active");
                /* $("#circle").attr("class", "active"); */
                $("svg path#back").attr("stroke", "#034870");
                $("svg path#back").attr("fill", "#FFFFFF");
                $("svg path#ring").attr("stroke", "#FF1251");

                animation.resume();
                playing = true;
            } else {
                $("svg path").attr("class", "");
                /* $("#circle").attr("class", ""); */
                animation.pause();
                playing = false;
            }

        });

    });

【问题讨论】：

标签： javascript jquery css svg gsap

【解决方案1】：

你不应该混合使用 JS+CSS 动画。删除以下 CSS：

#ring.active {
    -webkit-animation: load 20s 1 forwards;
    -moz-animation: load 20s 1 forwards;
    -o-animation: load 20s 1 forwards;
    -ms-animation: load 20s 1 forwards;
    animation: load 20s 1 forwards;

    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

#ring.paused {
   -ms-animation-play-state: paused;
   -o-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -webkit-animation-play-state: paused;
   animation-play-state: paused;
}

【讨论】：