Re: [polymerdiscuss] Re: core-animated-pages to animate toolbars

[Yvonne Yip]

[+polymer-dev for public discussion]

core-animated-pages fits its children to itself using absolute positioning. In this example, the core-animated-pages element has no height, causing the issues you noted. It's tricky to make core-animated-pages sized to its content, but you could work around it by giving it some height as you already discovered. 

On Thu, Jul 24, 2014 at 11:25 AM, Mehmet Fidanboylu <meh...@google.com> wrote:

The simplest hack I could do for now is to explicitly set the height of the outer div:

<div class="core-header" id="search-panel-container">

#search-panel-container {

  height: 64px;

}

- Mehmet

On Thu, Jul 24, 2014 at 11:08 AM, Mehmet Fidanboylu <meh...@google.com> wrote:

Hi polymer folks,

I have a use case where I would like to animate switching between a regular toolbar and a search toolbar while keeping the content the same and visible. I tried doing something like this:

<core-header-panel main mode="standard" shadow="true">

  <div class="core-header">

     <core-animated-pages id="search-panel" transitions="cross-fade" selected=0>

        <section>

           <core-toolbar cross-fade>

              My regular toolbar

           </core-toolbar>

        </section>

        <section>

           <core-toolbar cross-fade>

              My search toolbar

           </core-toolbar>

        </section>

      </core-animated-pages>

   </div>

   <div class="content">

      My content

   </div>

</core-header-panel>

This works great for animating the toolbars; but I lose two things which are probably related:

- Toolbar section no longer shows a drop shadow

- Toolbar section does not have height; the content div starts at top = 0

My guess is that core-animated-pages is not meant to be used this way so I wanted to ask how else I would achieve what I want. 

core-animation probably won't work for me as it seems very close to CSS animations and I am not sure how to do those w/o using position fixed to make sure both dom elements existing at the same time does not cause layout issues. (Come to think of it, may be that's why core-animated-pages does not work; it sets fixed position for the header which causes the content div to ignore the header altogether).

Thanks for the input!

- Mehmet