GreenSock TimelineMax在Safari和Firefox中不工作的路徑元素

Question

我想要創建幾個我在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); 
    } 
} 

JS

$(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(); 
}); 

任何幫助，將不勝感激！

Answer 1

好吧，原來，CSS規則轉換規則覆蓋了TweenMax在路徑元素上設置的轉換。我不知道爲什麼！

所以我用內聯變換替換了類。這裏是新的工作代碼，如果有人有興趣：

CSS

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

JS

$(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(); 
});