<霓虹动画页面>不能与< paper-tabs>一起使用? [英] <neon-animated-pages> does not work with <paper-tabs>?

问题描述

目前无法在自定义元素中使用<paper-tabs>来[[select]] <neon-animated-pages>.正确吗?

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.

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

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.

如果我错了.而且，如果可以使用<paper-tabs>到[[select]] <neon-animated-pages>，有人可以发布一个有效的示例吗?

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?

我对此理论的证明是，仅将<iron-pages>元素更改为<neon-animated-pages>会使以下代码从工作"变为不工作".

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

发生的事情是，当尝试使用<neon-animated-pages>时，所有页面同时显示在<my-view>上.就像根本没有<neon-animated-pages>元素标签一样.

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.

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

my-view.html

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>

无效代码

index.html

Not Working Code

index.html

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

my-view.html

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>

每个@zerodevx的工作JsBins:

Working JsBins per @zerodevx:

• 位于顶级index.html | http://jsbin.com/vudinaziwe/edit?html，输出
• 内部自定义元素 | http://jsbin.com/bejahumeru/edit?html，输出

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

推荐答案

我不明白为什么不这样做-除非<neon-animation>的API更改，否则您的页面元素需要实现Polymer.NeonAnimatableBehavior. <neon-animatable>元素是用于此的便捷元素.您还需要导入正在使用的特定动画.

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>

工作jsbin:http://jsbin.com/vudinaziwe/edit?html，输出

更新1:

将此内容应用于自定义元素

Applying this inside a custom element,

x-test.html

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，输出

这篇关于<霓虹动画页面>不能与< paper-tabs>一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！