聚合物霓虹灯动画页面：没有播放过渡动画

Question

我正在尝试使用 node-webkit 和 Polymer 1.0 构建应用程序。

其中一部分 - 可分页的欢迎屏幕，用于向用户简要概述应用程序的功能。

我正在为此使用霓虹灯动画页面。页面切换工作完美。但是没有播放动画。

如果有人能至少给我指出我的问题所在的方向，我将非常高兴 - 我没有想法。请参阅下面的代码。

index.html:

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script type="text/javascript" src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./bower_components/neon-animation/neon-animation.html">

<link rel="import" href="./domComponents/switchableAnimatedPages.html">
<link rel="import" href="./components/welcome/welcomeScreen.html">

<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./bower_components/signalr/jquery.signalR.js"></script>
<script type="text/javascript">
    global.$ = $;
</script>

<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
</head>

<body>

<welcome-screen></welcome-screen>
<script src="main.js"></script>

</body>

</html>

welcomeScreen.html

<dom-module id="welcome-screen">

<style>
    :host {
        height: 100%;
        width: 100%;
        display: block;
    }
</style>

<template>
    <switchable-animated-pages>
        <neon-animatable>1</neon-animatable>
        <neon-animatable>2</neon-animatable>
    </switchable-animated-pages>
</template>

<script>
    Polymer({
        is: 'welcome-screen'
    });
</script>

</dom-module>

switchableAnimatedPages.html

<dom-module id="switchable-animated-pages">

<style>
    :host {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    #pages {
        width: 80%;
        height: 100%;
        background-color: #00bcd6;
    }

    #switcher {
        width: 20%;
        height: 100%;
        background-color: orange;
    }
</style>

<template>
    <neon-animated-pages id="pages" selected="{{selectedPage}}"
        entry-animation="fade-in-animation" exit-animation="fade-out-animation">
        <content></content>
    </neon-animated-pages>
    <div id="switcher" on-click="switchPage"></div>
</template>

<script>
    Polymer({

        is: 'switchable-animated-pages',

        properties: {
            selectedPage: {
                type: Number,
                value: 0,
                notify: true
            }
        },

        switchPage: function() {
            this.selectedPage = this.selectedPage ? 0 : 1;
        }

    });
</script>

</dom-module>

Answer 1

我觉得你的代码没问题。您使用的 neon-animation 是哪个版本？ Web 动画 polyfill 版本 2.1.1 中存在一个错误，它阻止了来自运行的动画，并且 neon-animation 的 version 1.0.5 将 polyfill 固定到工作版本。

聚合物霓虹灯动画页面：没有播放过渡动画

Polymer neon-animated pages: no transition animation played

javascript

node-webkit

polymer