title: Polymer neon-animated pages: no transition animation played
body: <p>I'm trying to build an application using node-webkit and Polymer 1.0.</p>
  
  <p>One part of it - pageable welcome screens to give a short overview of app's features to user.</p>
  
  <p>I'm using neon-animated pages for that. The page-switching works perfectly. But no animations are played. </p>
  
  <p>I'd be very happy if anyone could give me at least the direction where my problem could be - I'm out of ideas. See the code below. </p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript" src="./bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="./bower_components/neon-animation/neon-animation.html"&gt;
  
  &lt;link rel="import" href="./domComponents/switchableAnimatedPages.html"&gt;
  &lt;link rel="import" href="./components/welcome/welcomeScreen.html"&gt;
  
  &lt;script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./bower_components/signalr/jquery.signalR.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      global.$ = $;
  &lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="stylesheets/main.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;welcome-screen&gt;&lt;/welcome-screen&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>welcomeScreen.html</strong></p>
  
  <pre><code>&lt;dom-module id="welcome-screen"&gt;
  
  &lt;style&gt;
      :host {
          height: 100%;
          width: 100%;
          display: block;
      }
  &lt;/style&gt;
  
  &lt;template&gt;
      &lt;switchable-animated-pages&gt;
          &lt;neon-animatable&gt;1&lt;/neon-animatable&gt;
          &lt;neon-animatable&gt;2&lt;/neon-animatable&gt;
      &lt;/switchable-animated-pages&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      Polymer({
          is: 'welcome-screen'
      });
  &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p><strong>switchableAnimatedPages.html</strong></p>
  
  <pre><code>&lt;dom-module id="switchable-animated-pages"&gt;
  
  &lt;style&gt;
      :host {
          display: flex;
          flex-direction: row;
          height: 100%;
      }
  
      #pages {
          width: 80%;
          height: 100%;
          background-color: #00bcd6;
      }
  
      #switcher {
          width: 20%;
          height: 100%;
          background-color: orange;
      }
  &lt;/style&gt;
  
  &lt;template&gt;
      &lt;neon-animated-pages id="pages" selected="{{selectedPage}}"
          entry-animation="fade-in-animation" exit-animation="fade-out-animation"&gt;
          &lt;content&gt;&lt;/content&gt;
      &lt;/neon-animated-pages&gt;
      &lt;div id="switcher" on-click="switchPage"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      Polymer({
  
          is: 'switchable-animated-pages',
  
          properties: {
              selectedPage: {
                  type: Number,
                  value: 0,
                  notify: true
              }
          },
  
          switchPage: function() {
              this.selectedPage = this.selectedPage ? 0 : 1;
          }
  
      });
  &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>