问题

Question

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

The comment by @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 seems to support my experience that using <paper-tabs> (inside a custom element) breaks <neon-animated-pages> right now.

Please provide working example.

If I'm wrong. And if it is possible to use <paper-tabs> to [[select]] <neon-animated-pages>, could somebody please post a working example?

My proof of this theory is that simply changing only the <iron-pages> element to <neon-animated-pages> causes the following code to go from "working" to "not working."

What happens is, when trying to use <neon-animated-pages>, all the pages appear on <my-view> at the same time. As it would if there were no <neon-animated-pages> element tag at all.

Working Code

index.html

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

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

Not Working Code

index.html

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

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

Working JsBins per @zerodevx:

At top level index.html | http://jsbin.com/vudinaziwe/edit?html,output
Inside custom element | http://jsbin.com/bejahumeru/edit?html,output

回答1:

I don't see why not - unless <neon-animation>'s API has changed, your page elements need to implement Polymer.NeonAnimatableBehavior. The <neon-animatable> element is a convenience element for that. You also need to import the specific animations you are using.

In your example, your imports should should look something like:

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

While your body might look something like:

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

Working jsbin: http://jsbin.com/vudinaziwe/edit?html,output

UPDATE 1:

Applying this inside a custom element,

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

回答2:

My problem was with my imports.

I was using:

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

instead of:

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

来源：https://stackoverflow.com/questions/32817657/neon-animated-pages-does-not-work-with-paper-tabs

标签

polymer

polymer-1.0

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