GreenSock TimelineMax가 Safari 및 Firefox에서 작동하지 않는 경로 요소에 있음

Question

JavaScript/jQuery에서 만들고 추가 한 여러 경로 요소에 애니메이션을 적용하려고합니다. 그런 다음 타임 라인을 사용하여 이러한 요소를 하나씩 애니메이션화합니다 (다른 값을 사용하여 비틀어 사용할 수 없음). 결국 전체 일정표를 재생하는 대신 일정 비율을 재생하려고합니다.

이것은 Chrome에서 정상적으로 작동하지만 Safari 및 Firefox에서는 작동하지 않으며 그 이유를 파악할 수 없습니다. 여기

는 CodePen입니다 : http://codepen.io/elisabeth_hamel/pen/kXqOmw

편집 : CodePen가 업데이트 지금 노력하고 있습니다.

HTML 어떤 도움을 주시면 감사하겠습니다

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

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

CSS :

그리고 여기에 코드입니다!

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