Question

说我有一个聚合物应用test-app，一个常规div div-a和一个聚合物元素page-a。

现在我正在尝试构建animated-pages，其中包含div-a和page-a

<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上的动画无效。 <{1}}突然出现，而不是渐渐消失。

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

有什么想法吗？

Answer 1

交叉淡入淡出并不能直接处理overflow: hidden设置的元素。

聚合物：在聚合物元素上执行动画页面转换

1 个答案: