Question

我在Polymer项目中使用了霓虹动画页面。通过页面的动画和路由工作正常。唯一的问题是，在我的组件内部，造型不再适用于我的纸质材料。填充和边距丢失，我的文字没有放入其中。

查看我的代码：的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

我已经解决了这个问题。如果忘了添加＆lt;氖动画＆GT;到我的页面:)

聚合物霓虹灯动画与纸材料

1 个答案: