Question

我使用霓虹动画组件为元素设置动画。它工作正常，除了我想更进一步。

这是我的动画配置。

animationConfig: {
    value: function() {
        return {
            entry: {
                name: 'slide-down-animation',
                node: this.$.target
            },
            exit: {
                name: 'fade-out-animation',
                node: this.$.target
            }
        }
    }
}

我想为进入和退出组合两个动画，但我无法弄清楚如何做到这一点。这是我认为可能有用的想法，但没有：

animationConfig: {
    value: function() {
        return {
            entry: {
                name: [ 'slide-down-animation', 'fade-in-animation' ],
                node: this.$.target
            },
            exit: {
                name: [ 'slide-up-animation', 'fade-out-animation' ],
                node: this.$.target
            }
        }
    }
}

我希望这个元素同时滑动和淡出。有谁知道怎么做？

Answer 1

我找到了文档。

以下是文档网址：https://elements.polymer-project.org/guides/using-neon-animations#configuration-multiple

这是一个有效的例子：

animationConfig: {
    value: function() {
        return {
            entry: [
                {
                    name: 'slide-down-animation',
                    node: this.$.target
                },
                {
                    name: 'fade-in-animation',
                    node: this.$.target
                }
            ],
            exit: [
                {
                    name: 'slide-up-animation',
                    node: this.$.target
                },
                {
                    name: 'fade-out-animation',
                    node: this.$.target
                }
            ]
        }
    }
}

Polymer 1.0同步动画

1 个答案: