title: Angular Fade In Out animation not working
body: <p>I want to achieve a simple animation using the angular animation package</p>
  
  <p>The idea is to just transition from opacity 0 to opacity 1 to give the fade sensation.</p>
  
  <p>I could make it work for another properties like height and display, but not opacity.</p>
  
  <p>this is the little animation</p>
  
  <pre><code>trigger('fadeInOut', [
    state('initial', style({
      'display': 'none',
      'opacity': '0'
    })),
    state('final', style({
      'opacity': '1'
    })),
    transition('initial &lt;=&gt; final', [
      animate('200ms')
    ])
  ])
  </code></pre>
  
  <p>And the trigger in the HTML as follows:</p>
  
  <pre><code>&lt;div class="tu-plus-wrapper__content" [@fadeInOut]="privateMode"&gt;
      &lt;div class="tu-plus-wrapper__content__points"&gt;{{points | number}}&lt;/div&gt;
      &lt;div class="tu-plus-wrapper__content__text"&gt;Puntos&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>it sits upon a property called privateMode, which changes depending on a toggle button.</p>
  
  <p>But it just does nothing, display works well but looks really rough transition, I would like to use opacity to have a better UI.</p>
  
  <p>Any animation junkie out there?</p>