title: Angular 2/4 Animation on div height
body: <p>I'll try to keep it short.
  For some reason, My animation seems to work fine on width/opacity style attribute yet it doesn't work on height attribute....</p>
  
  <p>the animation  - </p>
  
  <pre class="lang-js prettyprint-override"><code>trigger('Grow', [
  transition(':enter', [   // :enter is alias to 'void =&gt; *'
    style({height:'0'}),
    animate(500, style({height:'*'})) 
  ]),
  transition(':leave', [   // :leave is alias to '* =&gt; void'
    animate(500, style({height:0})) 
  ])
  ])
  </code></pre>
  
  <p>Changing the 'height' to width/opacity and the animation works great...
  any one knows wheres the issue? couldn't find relative answer anywhere .</p>
  
  <p>an example of what I'm trying to achieve is like the animation in udemy, upon clicking on a section the div height expands the display all the videos - 
  <a href="https://www.udemy.com/meteor-react/" rel="noreferrer">https://www.udemy.com/meteor-react/</a></p>
  
  <p>thanks for reading .</p>
  
  <p><strong>Update</strong> - still doesn't work...</p>
  
  <p>maybe its something with what I'm animating on?</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div class="animate" *ngIf="show" [@animate]&gt; 
    &lt;div  *ngFor="let video of section"&gt;&lt;a&gt;hi&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what happens is once I click, the div.animate is showing (by ngif) and fills with lots of lines that says 'hi'.
  I want that on div.animate show, to make the animation I specified.</p>
  
  <p>help! ^^</p>