title: Angular 4 animations is executing on init component
body: <p>When is executing a component where is used a animations, the animation is executing, same that the state of animation is in display none,</p>
  
  <p>show this gif:</p>
  
  <p><a href="https://i.imgur.com/v0v61rV.gifv" rel="nofollow noreferrer">Gif</a></p>
  
  <p>The animation in modal is appaer when open the component, and i want that not this.</p>
  
  <p>Help me, pleaese !!</p>
  
  <p>component.ts</p>
  
  <pre><code>trigger('openModal', [
    state('true', style({
      display: 'block',
      'transform': 'scale(1)'
    })),
    state('false', style({
      display: 'none',
      'transform': 'scale(0)'
    })),
    transition('* =&gt; *', animate('.2s'))
  ]),
  
  openCancelFavorite: boolean = false;
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code> &lt;div [@openModal]="openCancelFavorite" class="onbusca-favorite-remove"&gt;
      &lt;div class="row onbusca-row"&gt;
        &lt;div class="ml-auto col-auto"&gt;
            &lt;i (click)="openCancelFavorite = false" class="fa fa-close onbusca-login-close"&gt;&lt;/i&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
  
        &lt;p class="not-p onbusca-favorite-remove-message"&gt;Você tem certeza que quer remover este produto dos favoritos ?&lt;/p&gt;
  
      &lt;div class="onbusca-favorite-buttons"&gt;
        &lt;button class="btn btn-primary"&gt;Sim, remova&lt;/button&gt;
        &lt;button (click)="openCancelFavorite = false" class="btn btn-outline-primary"&gt;Cancelar&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>