Shadow dom 中的聚合物英雄过渡答案

【问题标题】：polymer hero transition in shadow domShadow dom 中的聚合物英雄过渡
【发布时间】：2015-03-05 01:57:28
【问题描述】：

我有一个位于聚合物元素中的英雄过渡。该文档指出，转换最多可用于 1 级影子根。 (https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages)。但是，它不起作用。

如果我将元素移到 shadow dom 之外，它会按预期工作。

<polymer-element name="x-el" noscript>
  <template>
    <div hero-id="hero-test" hero> GO HERO </div>
  </template>
</polymer-element>

<core-animated-pages transitions="hero-transition cross-fade">
        <section>
            // works
            <div hero-id="hero-test" hero> GO HERO </div>

            // doesn't work
            <x-el></x-el>
        </section>

        <section>
            <div hero-id="hero-test" hero> YAY </div>
        </section>
</core-animated-pages>

现场演示：http://codepen.io/nicolasrannou/pen/zxNYMw

我错过了什么吗？

谢谢

【问题讨论】：

为了更清楚，过渡只在一个方向上起作用。

标签： transition polymer web-component

【解决方案1】：

只需删除自定义元素外的“部分”即可使用！

    <!--<section>-->
        <x-el onclick="stuff(1);"></x-el>
    <!--</section>-->

检查这个：http://codepen.io/anon/pen/yygydK

祝你好运

【讨论】：

我花了一段时间才弄清楚这一点，基本上你不会用另一个 session 或 div 包裹一个元素，当它用于 hero-transitions 时。