Question

我已经制作了一个基本的聚合物元素，它可以作为一个包装器，根据数据绑定的可见性属性来淡入淡出。

逻辑很简单。可见性==是真的吗？淡入淡出。

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

为什么动画后元素不透明度会重置为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属性“只读”...

动画不透明度不会留在Polymer中

2 个答案: