title: Angular. Animating flex elements
body: <p>Hello. I have a small component that looks like so:</p>
  
  <p><a href="https://i.stack.imgur.com/YRlOf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YRlOf.png" alt="enter image description here"></a></p>
  
  <p>when search is clicked it turns into:</p>
  
  <p><a href="https://i.stack.imgur.com/x19mq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x19mq.png" alt="enter image description here"></a></p>
  
  <p>In the markup there are two <code>flex</code> elements: for header (<code>flex: 1</code>) and for search. On search click I hide first one and expand second one. Now I want to animate the transition.</p>
  
  <p>I started with animating header element. First I tried animating <code>width</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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})),
  ]),
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yfQlg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yfQlg.gif" alt="enter image description here"></a></p>
  
  <p>It's almost instant on enter and the <code>Header</code> word sliding to the left instead of shrinking. (setting <code>overflow: hidden</code> on header breaks animation completely)</p>
  
  <p>Then I tried animating <code>flex-grow</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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'})),
  ]),
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YSZGt.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YSZGt.gif" alt="enter image description here"></a></p>
  
  <p>Better animation on enter and almost no animation on leave. Combining the two together:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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})),
  ]),
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/66dxJ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/66dxJ.gif" alt="enter image description here"></a></p>
  
  <p><a href="https://plnkr.co/edit/ZVMP2xbG00kqQUVz7hiQ?p=preview" rel="nofollow noreferrer">Plunker</a></p>
  
  <p>Any ideas how can I fix the sliding header?</p>