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

当元素准备好时，添加css变换，不起作用

1 个答案: