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

Question

问题

It is not possible to use <paper-tabs> inside a custom element to [[select]] <neon-animated-pages> right now. Correct?

@FelixEdlemann的评论：

But I still didn't find a solution for using neon-animated-pages in combination with paper-tabs.

on this Youtube video by @RobDodson 似乎支持我的经验，即使用 <paper-tabs>（在自定义元素内）现在会破坏 <neon-animated-pages>。

请提供工作示例。

如果我错了。如果可以使用 <paper-tabs> 到 [[select]] <neon-animated-pages>，有人可以 post 一个工作示例吗？

我对这一理论的证明是，仅将 <iron-pages> 元素更改为 <neon-animated-pages> 会导致以下代码从 "working" 变为 "not working."

发生的情况是，当尝试使用 <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">

虽然您的 body 可能看起来像：

  <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>？

<neon-animated-pages> does not work with <paper-tabs>?

polymer

polymer-1.0

问题

请提供工作示例。

工作代码

代码无效