英雄过渡背景消失

Question

http://www.polymer-project.org/components/core-animated-pages/demos/music.html

当你在chrome控制台改变.card的高度时，你会看到背景中隐藏在大卡片后面的小卡片瓷砖，在动画完成后突然完全消失。

有没有办法告诉英雄过渡不要删除父部分？还是一种让父部分逐渐消失的方法？

在这种情况下没关系，因为您看不到它们消失，但是当背景中有许多不适合大卡后面的小卡片时，如果它们留在背景中会更好看。

编辑1：

#mini {
 display: block !important;
}

#mini *[hero] {
  opacity: 0.5 !important;
}

        <section id="mini">

                <template repeat="{{items as item}}">
                    <div class="chip" hero-id="{{item.id}}" hero?="{{muts === item }}" on-tap="{{transition}}">

                    </div>
                </template>

        </section>

编辑2：

当背景芯片超过屏幕尺寸时，第二个英雄不再位于视口中间。

Answer 1

我发现的另一个解决方法是向 core-animated-pages 组件添加一个 id 和一些 CSS。 我的核心动画页面如下所示：

<core-animated-pages selected="{{page}}" transitions="hero-transition"
                         on-core-animated-pages-transition-end="{{complete}}">
    <section id="mini">
        <div class="chip-container" hero-p on-tap="{{transition}}">             
            ...
        </div>
        <div class="chip-container" hero-p on-tap="{{transition}}">
            ...
        </div>
    </section>
    <section id="details">
        ...
    </section>
</core-animated-pages>

没什么特别的，我只有两行“筹码”。请注意“芯片容器容器”上的 id，它使我们能够直接在 components/core-animated-pages/core-animated-pages.css 中进行一些 css 修改。这些修改如下：

/*
Enables us to keep the "chip-container container" visible even after the hero transition
*/

*#mini {
display: block !important;
}


/*
Fades out the "chip" that realized a transition ([active] and .core-selected are removed
from the "chip-container container" during the transition)
*/

*#mini *[hero] {
opacity: 0 !important;
}


/* 
Fades in the "chip" when everything goes back to it's original state ([hero] isn't 
removed from the chip, but [active] and .core-selected are re-set on the "chip-container
container", so we use this to distinguish wish state we're in, and so if it's "legit" to 
see the "chip") 
*/

*#mini[active] *[hero] {
opacity: 1 !important;
}

可能不是最干净的方法，但它有效，我希望我能很好地解释我是如何实现这个结果的，以及我解决方案的每一小部分。随意评论/询问是否不是这种情况:)

Answer 2

如果将cross-fade-all 添加到过渡列表中，背景卡片会更优雅地淡出，而不是在动画结束时消失：

<core-animated-pages
 selected="{{page}}"
 transitions="hero-transition cross-fade-all"
 on-core-animated-pages-transition-end="{{complete}}">

你可以测试一下on JS Bin。

Answer 3

你能展示你的 .js 代码吗？您需要删除 object.flush();来自您的 .js 代码。希望对您有所帮助。