Question

在IE和Safari中，暂停和恢复进度条的工作很有效但是当你点击暂停时它在firefox和chrome中它没有在正确的时间暂停但似乎跳回然后停止并且当你最初开始动画它不是从顶部开始，而是先于自身。

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

要启动它，请点击大PINK圈

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;
            }

        });

    });

Answer 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;
}

jQuery / CSS动画 - 暂停在FF和Chrome中跳回来并启动不正确

1 个答案: