переход полимерного героя в теневой дом

У меня есть переход героя внутри полимерного элемента. В документации указано, что переход будет работать до 1 уровня теневого корня. (https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages). Однако это не работает.

Если я перемещаю элемент за пределы теневого дома, он работает, как и ожидалось.

<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 web-component polymer
person Nicolas    schedule 07.01.2015    source источник
comment
Чтобы быть более понятным, переход работает только в одном направлении.   -  person Nicolas    schedule 07.01.2015

Ответы (1)


arrow_upward
1
arrow_downward

Просто удалите «раздел» за пределами вашего пользовательского элемента, и все заработает!

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

Проверьте это: http://codepen.io/anon/pen/yygydK.

Удачи

person leetrunghoo    schedule 07.01.2015
comment
Мне потребовалось некоторое время, чтобы понять это, в основном вы не обертываете элемент другим session или div, когда он используется для hero-transitions. - person Justin XL; 08.01.2015