<neon-animated-pages>不适用于<paper-tabs>？

Question

题

现在无法<paper-tabs>在自定义元素内部使用[[select]] <neon-animated-pages>.正确？

@FelixEdlemann的评论:

但我仍然没有找到将霓虹动画页面与纸张标签结合使用的解决方案.

@RobDodson在这个Youtube视频上似乎支持我的经验,即使用<paper-tabs>(在自定义元素内部)<neon-animated-pages>现在就会中断.

---

请提供工作示例.

如果我错了.而如果是可以使用<paper-tabs>到[[select]] <neon-animated-pages>,可能有人请张贴工作的例子吗？

---

我对这个理论的证明就是仅仅改变<iron-pages>元素就会<neon-animated-pages>导致以下代码从"工作"变为"不工作".

发生的事情是,在尝试使用时<neon-animated-pages>,所有页面<my-view>同时出现.就像没有<neon-animated-pages>元素标签一样.

工作守则

的index.html

<my-view>...</my-view>

我-view.html

<template>
  <iron-pages class="flex" selected="[[selected]]">
  <!--Changing only the above line to <neon-animated-pages breaks it-->
    <my-page-1></my-page-1>
    <my-page-2></my-page-2>
    <my-page-3></my-page-3>
  </iron-pages>
  <paper-tabs selected="{{selected}}">
    <paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
    <paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
    <paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
  </paper-tabs>
</template>

不工作的代码

的index.html

<my-view>...</my-view>

我-view.html

<template>
<!-- The below tag is what seems to break it / stop it from working --> 
  <neon-animated-pages
      class="flex"
      selected="[[selected]]"
      entry-animation="slide-from-left-animation"
      exit-animation="fade-out-animation"
  >
    <my-page-1></my-page-1>
    <my-page-2></my-page-2>
    <my-page-3></my-page-3>
  </neon-animated-pages
  <paper-tabs selected="{{selected}}">
    <paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
    <paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
    <paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
  </paper-tabs>
</template>

每个@zerodevx工作JsBins:

• 在顶级index.html | http://jsbin.com/vudinaziwe/edit?html,output
• 里面的自定义元素 | http://jsbin.com/bejahumeru/edit?html,output

Answer 1

我不明白为什么不 - 除非<neon-animation>API已经改变,你的页面元素需要实现Polymer.NeonAnimatableBehavior.的<neon-animatable>元件是为方便起见元件.您还需要导入正在使用的特定动画.

在您的示例中,您的导入应该类似于:

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">

虽然你的身体可能看起来像:

  <template is="dom-bind">
    <paper-tabs selected="{{selected}}">
      <paper-tab>PAGE 1</paper-tab>
      <paper-tab>PAGE 2</paper-tab>
      <paper-tab>PAGE 3</paper-tab>
    </paper-tabs>
    <neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
      <neon-animatable>PAGE 1 CONTENTS</neon-animatable>
      <neon-animatable>PAGE 2 CONTENTS</neon-animatable>
      <neon-animatable>PAGE 3 CONTENTS</neon-animatable>
    </neon-animated-pages>
  </template>

工作jsbin:http://jsbin.com/vudinaziwe/edit？html,output

更新1:

在自定义元素中应用此元素,

X-的test.html

<link rel="import" href="bower_components/polymer/polymer.html">    
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">    
<dom-module id="x-test">
  <template>
    <paper-tabs selected="{{selected}}">
      <paper-tab>PAGE 1</paper-tab>
      <paper-tab>PAGE 2</paper-tab>
      <paper-tab>PAGE 3</paper-tab>
    </paper-tabs>
    <neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
      <neon-animatable>PAGE 1 CONTENTS</neon-animatable>
      <neon-animatable>PAGE 2 CONTENTS</neon-animatable>
      <neon-animatable>PAGE 3 CONTENTS</neon-animatable>
    </neon-animated-pages>
  </template>
  <script>
    Polymer({
      is: "x-test",
      properties: {
        selected: { type: Number, value: 0 }
      }
    });
  </script>
</dom-module>

Jsbin:http://jsbin.com/bejahumeru/edit？html,output