路径元素上的GreenSock TimelineMax在Safari和Firefox中不起作用

debugcn 发表于 Dev

伊丽莎白·哈默尔（Elisabeth Hamel）

我正在尝试为我在JavaScript / jQuery中创建并附加的几个路径元素设置动画。然后，我使用时间轴对这些元素进行一个动画处理（具有不同的值，因此我不能使用交错）。最后，我不想播放完整的时间表，而只是其中的一部分。

这在Chrome浏览器中可以正常工作，但在Safari和Firefox中却不能，我不知道为什么。

这是一个CodePen：http ://codepen.io/elisabeth_hamel/pen/kXqOmw

编辑： CodePen已更新，现在可以使用。

这是代码：

的HTML

<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 2 1' preserveAspectRatio='xMinYMid meet'></svg>

的CSS

svg{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    margin: auto;
    overflow: visible;
    z-index: 1;
    .up{
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
    .down{
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, -40px, 0);
    }
}

$(function(){
    var trianglesTimeline = new TimelineMax({paused: true, smoothChildTiming: true});

    function setAnimations(){
        var nbTriangles, i = 0, svg = '', random = 1, thisPath;

        nbTriangles = ($(window).width() - 60)/9 | 0;
        for(i; i<nbTriangles; i++){
            random = (Math.random()*(2.5-0.5) + 0.5).toFixed(1);
            if(i%2 === 0){
                svg += "<path fill='#000' d='M0 0H2 L1 1Z' class='down' data-op='"+random+"' data-x='"+i+"' style='opacity:0'/>";
            }else{
                svg += "<path fill='#000' d='M0 1H2 L1 0Z' class='up' data-op='"+random+"' data-x='"+i+"' style='opacity:0'/>";
            }
        }
        $('svg').html(svg);

        i = 0;
        for(i; i<nbTriangles; i++){
            thisPath = $('path').eq(i);
            TweenMax.set(thisPath, {x: thisPath.data('x')}, 0);
            trianglesTimeline.to(thisPath, 0.3, {opacity: thisPath.data('op'), y: '0px', delay: 0.04*i}, 0);
        }
        trianglesTimeline.tweenTo( trianglesTimeline.duration() * 0.1 );
    }

    setAnimations();
});

任何帮助，将不胜感激！

伊丽莎白·哈默尔（Elisabeth Hamel）

好的，原来CSS规则转换规则覆盖了TweenMax对路径元素设置的转换。我不知道为什么！

因此，我用内联转换替换了这些类。如果有人感兴趣，这是新的工作代码：

的CSS

svg{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    margin: auto;
    overflow: visible;
    z-index: 1;
}

$(function(){

    var trianglesTimeline = new TimelineMax({paused: true, smoothChildTiming: true});

    function setAnimations(){
        var nbTriangles, i = 0, svg = '', random = 1, thisPath;

        nbTriangles = ($(window).width() - 60)/9 | 0;
        for(i; i<nbTriangles; i++){
            random = (Math.random()*(2.5-0.5) + 0.5).toFixed(1);
            if(i%2 === 0){
                svg += "<path fill='#000' d='M0 0H2 L1 1Z' transform='translate("+i+", 40)' data-op='"+random+"' style='opacity:0'/>";
            }else{
                svg += "<path fill='#000' d='M0 1H2 L1 0Z' transform='translate("+i+", -40)' data-op='"+random+"' style='opacity:0'/>";
            }
        }
        $('svg').html(svg);

        i = 0;
        for(i; i<nbTriangles; i++){
            thisPath = $('path').eq(i);
            trianglesTimeline.to(thisPath, 0.3, {opacity: thisPath.data('op'), y: '0px', delay: 0.04*i}, 0);
        }
        trianglesTimeline.tweenTo( trianglesTimeline.duration() * 0.1 );
    }

    setAnimations();
 });

编辑

为了使其在IE中起作用，我进行了一些其他修改：

$(function(){
    function makeSVG(tag, attrs){
        var el = document.createElementNS('http://www.w3.org/2000/svg', tag), k;
        for(k in attrs){
            el.setAttribute(k, attrs[k]);
        }
        return el;
    }

    var trianglesTimeline = new TimelineMax({paused: true, smoothChildTiming: true});

    function setAnimations(){
        var nbTriangles, i = 0, svg = '', random = 1, thisPath, y, d;

        nbTriangles = ($(window).width() - 60)/9 | 0;
        for(i; i<nbTriangles; i++){
            random = (Math.random()*(2.5-0.5) + 0.5).toFixed(1);
            if(i%2 === 0){
                y = 40;
                d = 'M0 0H2 L1 1Z';
            }else{
                y = -40;
                d = 'M0 1H2 L1 0Z';
            }
            svg = makeSVG('path', {fill: '#000', d: d, transform:'translate('+i+', '+y+')', 'data-op': random, style: 'opacity:0'});
            $('svg').append(svg);
        }

        i = 0;
        for(i; i<nbTriangles; i++){
            thisPath = $('path').eq(i);
            trianglesTimeline.to(thisPath, 0.3, {opacity: thisPath.data('op'), y: '0px', delay: 0.04*i}, 0);
        }
        trianglesTimeline.tweenTo( trianglesTimeline.duration() * 0.1 );
    }

    setAnimations();
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。