带纸的聚合物霓虹灯动画 material

Question

我在我的 Polymer 项目中使用霓虹灯动画页面。通过页面的动画和路由工作正常。唯一的问题是在我的组件内部，样式不再适用于我的论文-material。填充和边距丢失，我的文字没有放在里面。

查看我的代码： Index.html

<neon-animated-pages attr-for-selected="data-route" selected="{{route}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
        <home-page data-route="home"></home-page>
        <games-page data-route="games"></games-page>
        <ranking-page data-route="ranking"></ranking-page>
        <contact-page data-route="contact"></contact-page>

      </neon-animated-pages>

排名页面为例：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="ranking-page">
<link rel="import" type="css" href="../../styles/elements/paper-material.css">

<template>
<style include="shared-styles"></style>
  <span class="page-title">Klassement</span>
  <paper-material elevation="1">
  Ranking
 </paper-material>
</template>

<script src="../../scripts/controllers/ranking.js"></script>

</dom-module>

排名页面脚本：

(function() {
  'use strict';

  Polymer({
    is: 'ranking-page',

    behaviors: [
          Polymer.NeonAnimatableBehavior,
          Polymer.NeonPageBehavior
        ],

        listeners: {
          'entry-animation-start': 'onEntryStart',
          'entry-animation-finish': 'onEntryFinish',
          'exit-animation-start': 'onExitStart',
          'exit-animation-finish': 'onExitFinish'
        },
        onEntryStart: function(e) {
            console.log(this.title + ' entry animation starts');
        },
        onEntryFinish: function(e) {
            console.log(this.title + ' entry animation finished');
        },
        onExitStart: function(e) {
            console.log(this.title + ' exit animation starts');
        },
        onExitFinish: function(e) {
            console.log(this.title + ' exit animation finished');
        }
  });
})();

有人可以帮我解决这个问题吗？

Answer 1

我已经解决了问题。如果忘记将 < neon-animatable > 添加到我的页面 :)

带纸的聚合物霓虹灯动画 material

Polymer neon animation with paper material

animation

polymer

paper-elements