聚合物霓虹灯-动画:如何使用级联动画和英雄动画一起？

Question

我有一个小应用程序，它使用一个cascaded-animation 和一个hero-animation在一起这里。

问题是，我的主要元素被设置为可见性隐藏，如load演示在正式文件中。

<style>
    :host {
        display: block;
        visibility: hidden;
    }
</style>

index.html侦听WebComponentsReady事件以调用WebComponentsReady上的show函数

<script>
    document.addEventListener('WebComponentsReady', function () {
        document.querySelector('library-element').show(); 
    });
</script>

然后，show方法生成库元素visible并调用动画：

show: function () {
    this.style.visibility = 'visible';
    this.playAnimation('entry');
}

我现在遇到的问题是，我动画化了一个具有两个 entry动画的子元素，显示方法想要播放这个动画。一个cascaded-animation和一个hero-animation。

animationConfig: {
    type: Object, 
    value: function () {
        return {
            'entry': [{
                name: 'cascaded-animation',
                animation: 'scale-up-animation',
            }, {
                name: 'hero-animation',
                id: 'hero',
                toPage: this
            }],
            'exit': [{
                name: 'hero-animation',
                id: 'hero',
                fromPage: this
            }, {
                name: 'fade-out-animation',
                node: this
            }]
        }
    }
}

这会导致cascaded-animation不播放，因为hero-animation中断，因为hero-animation所需的fromPage没有定义。

这是我得到的警告：

英雄动画: fromPage是未定义的！

这是我得到的错误消息：

聚合物-mini.html:2061秘密TypeError: CreateListFromArrayLike对非对象的调用

结果是，在启动时，cascaded-animation不运行。

建议的解决办法：

ONE:找到一种方法来修改中的show方法，使其只播放第一个动画。也许是这样的：

show: function () {
    this.style.visibility = 'visible';
    this.playAnimation(['entry'][0]);
}

2：更改第40行中的neon-shared-element-animation-behavior.html，如下所示：

if (!fromPage || !toPage) {
    Polymer.Base._warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
    return null;
};

对此：

if (!fromPage || !toPage) {
    console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
    return null;
};

在neon-animation元素的1.2.2小补丁之前。这样，它至少只会抛出一个警告，而是播放动画，而不是破坏动画。

这是演示

点击任何纸卡，只要你想，触发英雄和级联动画，并观察到，每当你刷新窗口，级联动画没有启动。

如何使cascaded-animation与hero-animation结合使用

Answer 1

问题是一个错误，昨天发布了1.2.3补丁。