Question

我在我的网站上使用Polymer新版本。我正在尝试core-animated-pages的英雄过渡。提供了一些示例in the core-animated-pages examples，尤其是this one。

通过这些例子，我必须理解这些例子，我已经得到了这个例子：jsbin。它并没有完全抛光，但它确实有效。

现在，我希望将此示例中的卡片显示为自定义元素。在这个自定义元素中，我需要有两个hero-id，一个用于图像，一个用于专辑标题。我尝试在this example中模拟它。这是代码：

相册卡自定义元素

<polymer-element name="album-card">

  <template>
    <style>
      :host{
        display: block;
        position: relative;
        background-color: grey;
        width: 200px;
      }
      .description{
        padding: 0px 10px;
        color: white;
      }
      .cube{
        width: 200px;
        height: 200px;
      }
    </style>

    <div vertical layout>
      <div class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
      <div class="description">
        <content select="h2" hero-id="title-hero" hero></content>
        <content select="h4"></content>
      </div>
    </div>

  </template>

  <script>
    Polymer("album-card", {});
  </script>

</polymer-element>

转换显示位置的主要元素

<polymer-element name="my-app">

  <template>
    <style>
    </style>

    <core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
      <section>
        <album-card>
          <h2>Album name</h2>
          <h4>x pictures</h4>
        </album-card>
      </section>
      <section>
        <core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
          <div class="title bottom" hero hero-id="title-hero">Album name</div>
        </core-toolbar>
      </section>
    </core-animated-pages>

  </template>

  <script>
    Polymer("my-app", {
      photopage: 0,
      albumTapped: function(){
        this.photopage++;
      }
    });
  </script>

</polymer-element>

现在我知道这是由于影子dom设置了字段的hero-id和hero属性，因此页面上的其他元素无法访问，但有没有办法在这种特殊情况下围绕这个？

Answer 1

实际上并不是影子dom。动画片为英雄“1深度影子”并且深深地褪去任何影子。
事情是你的自定义专辑卡在准备好回调和践踏之前变得一团糟。另外，你选择所选专辑的方式有点混乱（至少这就是我的想法）所以你的代码（~~我必须离开办公室现在~~ 我我在家里玩得很开心，编辑我的答案和罢工的东西）我让它反复工作反复来回：your fixed code (updated 2)

~~对不起，我不会吝啬，因为我真的要离开了。也许以后我会回来并更好地解释它，但至少~~“TLDR”答案在这里：你不应该在准备好的回调之前绑定东西（实际上你可以但它是特定的，应该明确地在元素原型）。 ~~我可能会稍后回到这里~~（我在这里）。希望能帮助到你。 ADDENDUM：哦，我当时没有注意到（我很匆忙）你把你的元素嵌套在一个部分中，使用自定义元素，这是不需要的（也不是这个部分所期望的）情况）。

仅用于复制/粘贴简易的完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src='http://www.polymer-project.org/webcomponents.js'></script>
  <link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
  <link rel='import' href='http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html'>
  <link rel='import' href='http://www.polymer-project.org/components/core-toolbar/core-toolbar.html'></head>
<body>
<!-- your album card element -->
  <polymer-element name="album-card" noscript>
    <template>
      <style>
          #thumbAlbum{
            display: block;
            background-color: grey;
            width: 200px;
          }
          #albumDesc{
            padding: 0px 10px;
            color: white;
          }
          #albumCover{
            width: 200px;
            height: 200px;
          }
        </style>

      <div id="thumbAlbum" vertical layout>
        <div id="albumCover" class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
        <div id="albumDesc" class="description">
          <content select="h2" hero-id="title-hero" hero></content>
          <content select="h4"></content>
        </div>
      </div>
    </template>
  </polymer-element>
<!-- your app alement -->
  <polymer-element name="my-app">
    <template>
      <core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
          <album-card>
            <h2>Album name</h2>
            <h4>x pictures</h4>
          </album-card>
          <section>
          <core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
            <div class="title bottom" hero hero-id="title-hero">Album name</div>
          </core-toolbar>
        </section>
      </core-animated-pages>
    </template>
    <script>
        Polymer("my-app", {
          photopage: 0,
          ready:function(){
          },
          albumTapped: function(){
            this.photopage = this.photopage > 0 ? 0 : 1;
          },
        });
      </script>
  </polymer-element>

  <my-app></my-app>

</body>
</html>

哦，并且在一个重要的旁注：总是使用webcomponents.js作为platform.js已被弃用，并且不太友好以找出问题。 plus 导入polymer.html。

Answer 2

实际上，如果您只是从album-card元素中移除section元素，它似乎有效：http://jsbin.com/botoxaneju/1/edit?html,output

我不确定为什么会这样，因为我遇到了同样的问题。

自定义元素中的聚合物英雄转换

2 个答案: