Question

我有一个小应用程序，cascaded-animation AND hero-animation here {/ 3}}。

问题是我的主要元素设置为隐藏可见性，例如load demo in the official documentation

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

index.html收听WebComponentsReady事件，以便在show上调用library-element函数：

<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会中断，因为fromPage所需的hero-animation未定义。

这是我得到的警告：

hero-animation：fromPage未定义！

这是我收到的错误消息：

polymer-mini.html：2061 Uncaught TypeError：在非对象上调用CreateListFromArrayLike

结果是在启动时cascaded-animation没有运行。

建议的解决方案：

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

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

TWO：更改第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

根据需要随时点击任何纸质卡片，以触发英雄和级联动画，并观察每当您刷新窗口时，都不会启动级联动画。

如何将cascaded-animation游戏与hero-animation？

结合使用

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

0 个答案: