Angular. Animating flex elements

Question

Hello. I have a small component that looks like so:

when search is clicked it turns into:

In the markup there are two flex elements: for header (flex: 1) and for search. On search click I hide first one and expand second one. Now I want to animate the transition.

I started with animating header element. First I tried animating width:

transition(':enter', [
    style({width: 0, 'max-width': 0}),
    animate(500, style({width: '*', 'max-width': '*'})),
]),
transition(':leave', [
    style({width: '*', 'max-width': '*'}),
    animate(500, style({width: 0, 'max-width': 0})),
]),

It's almost instant on enter and the Header word sliding to the left instead of shrinking. (setting overflow: hidden on header breaks animation completely)

Then I tried animating flex-grow:

transition(':enter', [
    style({'flex-grow': '0.001'}),
    animate(500, style({'flex-grow': '1'})),
]),
transition(':leave', [
    style({'flex-grow': '1'}),
    animate(500, style({'flex-grow': '0.001'})),
]),

Better animation on enter and almost no animation on leave. Combining the two together:

transition(':enter', [
    style({'flex-grow': '0.001'}),
    animate(500, style({'flex-grow': '1'})),
]),
transition(':leave', [
    style({width: '*', 'max-width': '*'}),
    animate(500, style({width: 0, 'max-width': 0})),
]),

Plunker

Any ideas how can I fix the sliding header?

Answer 1

Solution was to animate input element as well. In this case only width property needs to be animated:

  trigger('anim', [
    transition(':enter', [
      style({width: 0}),
      animate(250, style({width: '*'})),
    ]),
    transition(':leave', [
      style({width: '*'}),
      animate(250, style({width: 0})),
    ]),
  ]),

Plunker