Question

我正在使用一些GSAP代码制作一个动画，我从另一个项目调整了一些自定义JS。

function startAnimation() {

    var line1 = document.getElementById("line1");
    var line2 = document.getElementById("line2");
    var line3 = document.getElementById("line3");   
    var tl = new TimelineMax(); 

    //main timeline .. set lines to off and back on at the correct time tl

    tl
    .set(line1, {opacity: 0}, "0")
    .set(line2, {opacity: 0}, "0")
    .set(line3, {opacity: 0}, "0")
    .set(line1, {opacity: 1}, "0")
    .set(line2, {opacity: 1}, "3")
    .set(line3, {opacity: 1}, "6");

    //Drawlines Animation takes element
    function drawLinesTween(line, startTime) {
        var pathToDraw = line, length, timer;
        var obj = {length:0, pathLength:pathToDraw.getTotalLength()};
        pathToDraw.style.stroke = '#f1562b';
        var t = TweenMax.to(obj, 3, {length:obj.pathLength, onUpdate:drawLine, ease:Linear.easeNone, opacity: 100, delay: startTime});
        function drawLine() {
            pathToDraw.style.strokeDasharray = [obj.length, obj.pathLength].join(' ');
        }
    }

    drawLinesTween(line1, "0");
    drawLinesTween(line2, "3");
    drawLinesTween(line3, "6");

}
startAnimation();

自定义代码导致问题。它在Chrome上工作正常，但在Firefox上没有，在Windows上，它在控制台和操作系统上都没有出现类型错误。

锯齿状的线条意在以橙色的动画方式绘制。

任何人都有任何关于代码错误的想法吗？

GSAP动画在Chrome中运行，但不在Firefox中运行

0 个答案: