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

Question

I have a small application that uses a cascaded-animation AND a hero-animation together here .

The problem is that my main element is set to visibility hidden, like the load demo in the official documentation

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

The index.html listens to the WebComponentsReady event to call a show function on my library-element :

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

The show method then makes the library-element visible and calls the animation:

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

The problem that I have now is that I animate a child element that has two entry animations, that the show method wants to play. A cascaded-animation and a 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
            }]
        }
    }
}

This results in the cascaded-animation not playing, because the hero-animation breaks, because the fromPage that the hero-animation requires is not defined.

This is the warning I get:

hero-animation: fromPage is undefined!

This is the error message I get:

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

The result is that on startup the cascaded-animation does not run.

---

Suggested Solutions:

ONE: Find a way to modify the show method in my index.html to only play the first animation. Maybe something like this:

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

TWO: Change the neon-shared-element-animation-behavior.html in line 40 from this:

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

To this:

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

To what it has been before the minor patch to 1.2.2 of the neon-animation element. That way at least it only throws a warning, but plays the animation, instead of breaking the animation.

---

Here is the DEMO

Click on any paper-card as often as you want, to trigger the hero and cascaded animation and observe that whenever you refresh the window the cascaded animation is not launched.

---

How do I make the cascaded-animation play in combination with the hero-animation ?

Answer 1

问题是一个错误，昨天通过霓虹动画1.2.3版本进行了修补。