Блог

Я создаю полимерный элемент с радиальной индикаторной полосой выполнения. Я хочу анимировать, добавляя 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 в wrapper, то, когда это событие было запущено, я мог видеть анимацию.
исходная ссылка на элемент:https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9

В вашем примере отсутствует закрывающий </polymer-element> тег. Вам также необходимо удалить noscript атрибут. Это следует использовать, только если вы не определяете прототип для своего элемента.

Я бы также рекомендовал выполнять вашу работу с JS в attached обратном вызове, чтобы вы были уверены, что ваш элемент был добавлен в DOM.

Вот рабочая версия:http://jsbin.com/golayu/4/edit