聚合物动画获取关键帧错误

Question

我为我的元素创建了一个简单的动画，但我得到的不是很酷的效果 Uncaught TypeError: Keyframes must be null or an array of keyframes。

<script>
        Polymer({
            is: 'marvin-user-entrance',
            behaviors: [
                Polymer.NeonAnimationRunnerBehavior
            ],
            properties: {
                animationConfig: {
                    value: function() {
                        return {
                            'fade-in':[{name: 'fade-in-animation', node: this}],
                            'fade-out':[{name: 'fade-out-animation', node: this}]
                        }
                    }
                }
            },
            animate: function () {
                this.playAnimation('fade-out');
            },
            ready: function () {
                this.$.auth.animate();
            }
        });

    </script>

看来不是Polymer本身的问题，而是我的代码或web动画节点某处...

Answer 1

不确定这是否是问题的根源，但我发现在 CSS 以像素为单位明确设置动画元素的宽度和高度后，类似的错误消失了。

Answer 2

您应该调用 this.animate() 而不是 this.$.auth.animate()，因为 animate 函数是在 这个 Polymer 元素.[=16= 中定义的]

如果您只想为 auth 元素设置动画，请将 node 更改为指向 this.$.auth 而不是整个元素，如下所示 -

node: this.$.auth

聚合物动画获取关键帧错误

Polymer animation get Keyframes error

javascript

polymer

web-animations