Polymer Neon-Animation：如何同时使用级联动画和英雄动画？

Question

我有一个小型应用程序，它同时使用了 cascaded-animation AND 和 hero-animation here.

问题是我的主要元素设置为可见性隐藏，就像 load 演示 in the official documentation

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

index.html 侦听 WebComponentsReady 事件以在我的 library-element 上调用 show 函数：

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

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

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

我现在遇到的问题是，我为具有两个 entry 动画的子元素设置动画，show 方法想要播放该动画。一个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 未定义。

这是我收到的警告：

hero-animation: fromPage is undefined!

这是我收到的错误消息：

polymer-mini.html:2061 Uncaught TypeError: CreateListFromArrayLike called on non-object

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

建议的解决方案：

ONE:想办法修改我的index.html中的show方法只播放第一个动画。也许是这样的：

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

二：将第 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 小补丁之前的情况。这样至少它只会发出警告，但会播放动画，而不是破坏动画。

这里是DEMO

随意点击任何一张纸牌，触发英雄和级联动画，观察每次刷新 window 级联动画都不会启动。

如何让 cascaded-animation 与 hero-animation 一起玩？

Answer 1

问题是一个错误，昨天随着 neon-animation 1.2.3

的发布进行了修补

Polymer Neon-Animation：如何同时使用级联动画和英雄动画？

Polymer Neon-Animation: How to use cascaded-animation and hero-animation together?

html

javascript

web-component

polymer