hero transition background disappears - polymer

Question

http://www.polymer-project.org/components/core-animated-pages/demos/music.html
When you change the .card height in chrome console you will see that the small card tiles in the background hiding behind the big card, suddenly disappear completely when the animation is done.
Is there a way to tell a hero transition to not remove the parent section? Or a way to make the parent section disappear but gradually?
In this case it is ok because you don't see them disappear but when the background has a number of small cards that do not fit behind the large card it would look way better if they just stay in the background.
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:
The second hero is not in the middle of the view port anymore when the background chips exceed the screen size.

Answer 1

Another workaround I found is to add an id and a bit of CSS to the core-animated-pages component.
My core-animated-pages looks like this :
<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>
Nothing special, I just have two lines of "chips". Note the id on the "chip-container container", it's the one that enables us to do some css modification directly in components/core-animated-pages/core-animated-pages.css. Those modifications are the following :
/*
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;
}
Might not be the cleanest way but it works, I hope I explained well enough how I managed to achieve this result, and every tiny part of my solution. Feel free to comment / ask if that's not the case :)

Answer 2

If you add cross-fade-all to the list of transitions, the background cards will more gracefully fade out, rather than disappearing at the end of the animation:
<core-animated-pages
selected="{{page}}"
transitions="hero-transition cross-fade-all"
on-core-animated-pages-transition-end="{{complete}}">
You can test it on JS Bin.

Answer 3

Can you show your .js Code? You need to remove object.flush(); from your .js code. Hope this help.