问题

Question

问题

现在无法在<paper-tabs> [[select]]的自定义元素中使用<neon-animated-pages>。正确吗

@FelixEdlemann的评论：

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

this Youtube video by @RobDodson上的

似乎支持我的经验，即使用<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：

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

Answer 2

我的问题在于我的导入。

我正在使用：

<link rel="import" href="bower_components/neon-animated-pages/neon-animated-pages.html">

而不是：

<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">

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

问题

请提供工作示例。

工作代码

不工作代码

2 个答案: