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 byecount = 0 while kid = gets.chomp case kid when "BYE" #increase the count of bye byecount +=1 puts byecount break if byecount == 3 else #reset our count byecount = 0 speak end end将polyfill固定为工作版本。

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

1 个答案: