elment가 준비되어있을 때 작동하지 않을 때 CSS 변환을 추가하십시오.

Question

방사형 진행 막대 폴리머 요소를 구축 중입니다. 요소가 준비된 후 채우기 효과를 표시하기 위해 요소 내부의 특정 요소에 CSS 변환을 추가하여 애니메이션을 적용하려고합니다. 여기에 애니메이션이 때 요소의 부하를 표시하지 않는 코드

<polymer-element name="radial-progress" noscript> 
<template> 
<style> 
    { 
     width: 120px; 
     height: 120px; 
    } 
    .wrapper { 
     width: 100%; 
     height: 100%; 
    } 
    .radial-progress { 
     background-color: #d6dadc; 
     width: 100%; 
     height: 100%; 
     border-radius: 50%; 
    } 
    .radial-progress .inset{ 
     width: 114px; 
     height: 114px; 
     position: absolute; 
     background-color: #fbfbfb; 
     border-radius: 50%; 
     margin-left: 3px; 
     margin-top: 3px; 
     line-height: 114px; 
    } 
    .inset .percent{ 
     width: 100%; 
     height: 100%; 
     text-align: center; 
     vertical-align: middle; 
    } 
    .circle .mask, .circle .fill{ 
     width: 120px; 
     height: 120px; 
     position: absolute; 
     border-radius: 50%; 
     transition: -webkit-transform 1s; 
     transition: -ms-transform 1s; 
     transition: transform 1s; 
     -webkit-backface-visibility: hidden;  
    } 
    .circle .mask{ 
     clip: rect(0px,120px,120px,60px); 
    } 
    .circle .fill{ 
     clip: rect(0px,60px, 120px, 0px); 
     background-color: #97a71d; 
    } 
</style> 
    <div id="el" class="wrapper" > 
     <div class="radial-progress"> 
      <div class="circle"> 
       <div class="mask full"> 
        <div class="fill"></div> 
       </div> 
       <div class="mask half"> 
        <div class="fill"></div> 
        <div class="fill fix"></div> 
       </div> 
      </div> 
      <div class="inset"> 
       <div class="percent"></div> 
      </div> 
     </div> 
    </div> 
</template> 
<script type="text/javascript"> 
Polymer('radial-progress',{ 
    ready: function(){ 
     var transform_styles = ['webkitTransform', 
         'msTransform', 
         'transform']; 

     var rotation = Math.floor(Math.random() * 180) ; 
     var fill_rotation = rotation; 
     var fix_rotation = rotation * 2; 
     for(i in transform_styles) { 
      var ellist = this.$.el.querySelectorAll('.wrapper .circle .fill, .wrapper .circle .mask.full'); 
      var ellist2 = this.$.el.querySelectorAll('.wrapper .circle .fill.fix'); 
      console.log(ellist, ellist2) 
      for(var j=0 ; j < ellist.length ; j++){ 
       ellist[j].style[transform_styles[i]] = 'rotate(' + fill_rotation + 'deg)'; 
       console.log("operation", i) 
      } 
      for(var j2=0;j2<ellist2.length;j2++){ 
       ellist2[j2].style[transform_styles[i]] = 'rotate(' + fix_rotation + 'deg)'; 
      } 
     } 
    } 
}); 
</script> 

입니다. 래퍼에 on-tap을 추가하여 애니메이션 이벤트를 만들려고 할 때이 이벤트가 시작되면 애니메이션을 볼 수있었습니다. 요소에 대한 원본 참조 : https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9

Answer 1

귀하의 예는 닫는 </polymer-element> 태그가 누락되었습니다. noscript 속성도 제거해야합니다. 요소의 프로토 타입을 정의하지 않은 경우에만 사용해야합니다.

attached 콜백에서 JS 작업을 수행하는 것이 좋습니다. 그러면 요소가 DOM에 추가되었음을 보증 할 수 있습니다.

다음은 작동 버전입니다. http://jsbin.com/golayu/4/edit