动画不透明不存在于聚合物中

Question

我已经制作了一个基本的聚合物元素，它作为一个包装器，根据数据绑定的状态，对它的可见性属性进行渐变。

逻辑很简单。能见度==是真的吗？fadeIn : fadeOut.

问题是，一旦动画完成，元素不透明度就会重置。

为什么在动画之后将元素不透明度重置为1？

代码如下：

<link rel="import" href="core-animation/core-animation.html">
<polymer-element name="page-fader" attributes="visibility">
    <template>
        <style>
            :host {
                display: inline-block;
                background: white;
                width: 100%;
                height: 100px;
                content: "";
            }
        </style>
        <content> </content>
    </template>
    <script>
    Polymer('page-fader',{
        visibility : false,
        fader : {},
        start : 1,
        stop: 0,
        observe : {
            visibility : function() {
                this.visibility ? this.fadeIn() : this.fadeOut()
            }
        },

        ready : function() {
            this.fader = new CoreAnimation();
            this.fader.duration = 1000;
            this.fader.keyframes = [
              {opacity: this.start},
              {opacity: this.stop}
            ];
            this.fader.target = this;
        },

        fadeIn : function() {
            console.log( this.id + " in" )
            this.start = 0;
            this.stop = 1;
            this.fader.play();
        },
        fadeOut : function() {
            console.log( this.id + " out" )
            this.start = 1;
            this.stop = 0;
            this.fader.play();
        },

    });
    </script>
</polymer-element>

Answer 1

如果希望动画的效果在动画结束后继续使用最终值，那么将fill设置为"forwards"。

博士：http://www.polymer-project.org/docs/elements/core-elements.html#core-animation

Answer 2

我不知道填充“转发”是如何实现的。但是动画之后，我不能再用JavaScript改变那个属性了.它使css属性成为“只读”.