聚合物:在聚合物元素上执行动画页面过渡

Question

假设我有一个聚合物应用程序test-app，一个常规的div div-a和一个聚合物元素page-a。

现在，我正在尝试构建一个包含div-a和page-a的animated-pages

<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">

<link rel="import" href="../page-a/page-a.html">

<polymer-element name="test-app" flex vertical layout>

  <template>
      <core-animated-pages
        selected="{{selected}}"
        transitions="cross-fade"
      >
        <section name="div-a">
          <div cross-fade>
            <span>div-a</span>
          </div>
        </section>

        <section name="page-a">
          <page-a cross-fade></page-a>
        </section>

      </core-animated-pages>

  </template>

  <script src="./test-app.js"></script>

</polymer-element>

问题是:在执行过渡时，div-a上的动画运行良好，但page-a上的动画不起作用。page-a并没有淡出，而是突然出现了。

另一个奇怪的地方是:如果我将transitions="cross-fade"更改为transitions="cross-fade-all"，并删除在div和page-a上定义的其他cross-fade，则两个转换都会找到。

有什么想法吗？

Answer 1

交叉淡入淡出不会直接作用于设置了overflow: hidden的元素。