个人中心
gpt4 book ai didi

自定义元素中的 polymer 英雄过渡

转载 作者：行者123 更新时间：2023-12-02 03:32:43 25 4
gpt4 key购买 nike

我正在使用 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>

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

最佳答案

其实和shadow dom无关。动画用于英雄“1 shadow-dom of depth”并交叉淡入淡出任何 shadow-dom deep。
问题是你的自定义专辑卡在准备好回调和践踏东西之前得到了所有“bindy”。< br/> 另外，你选择专辑的方式有点乱(至少我是这么认为的)所以你的代码( 我要离开办公室 现在 我我在家享受编辑我的答案和敲击东西的乐趣)我让它工作 in reverse 来回这样:your fixed code (updated 2)

对不起，我不会再摆弄它了，因为我真的要走了。也许稍后我会回来解释得更好，但至少 "TLDR"答案在这里:你不应该在就绪回调之前绑定(bind)东西(实际上你可以，但它是特定的，应该在元素原型(prototype))。 我可能稍后会回到这里 (我在这里)。希望能帮助到你。附录: 哦，我当时没有注意到(我很着急)你将你的元素嵌套在一个部分中，带有自定义元素，这是不需要的(组件也不需要)例)。

完整代码只是为了便于复制/粘贴:

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

关于自定义元素中的 polymer 英雄过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25715716/

25 4 0
文章推荐： Laravel : Error in creating a relation to get first child of each parent entity
文章推荐： playframework - Play Framework 2.3.4 : How to Run JSHint as a Part of the Compile Task
文章推荐： angularjs - 要求 $scope 来欺骗 BC Controller 模块
文章推荐： multithreading - 如果我们将内存标记为WC(Write Combined)，那么我们是否自动具有一致性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com