Question

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

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

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

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

EDIT1：

#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>

EDIT2：

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

Answer 1

如果您将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 2

我发现的另一个解决方法是在核心动画页面组件中添加一个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修改的ID。这些修改如下：

/*
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 3

你能展示你的.js代码吗？你需要删除object.flush（）;来自你的.js代码。希望这有帮助。

英雄过渡背景消失了

3 个答案: