title: Animation doesnt keep final state, switches back to original state
body: <p>I'm learning Angular 6 at the moment and ran into a bit of a problem. I'm using this tutorial: <a href="https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html" rel="nofollow noreferrer">https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html</a></p>
  
  <p>When i click the button, the animation triggers as expected, but after the fade out the text pops up back again. Any ideas why it switches back to the original state?</p>
  
  <p><a href="https://i.stack.imgur.com/ZC1h8.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZC1h8.gif" alt="enter image description here"></a></p>
  
  <p>Thanks in advance</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;button (click)="toggle()"&gt;Toggle Fade&lt;/button&gt;
  &lt;div [@someCoolAnimation]="bindingVar"&gt;hello there&lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {trigger, transition, style, animate} from "@angular/animations";
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
      trigger('someCoolAnimation', [
        transition('* =&gt; fadeIn', [
          style({ opacity: 0 }),
          animate(1000, style({ opacity: 1 }))
        ]),
        transition('* =&gt; fadeOut', [
          animate(1000, style({ opacity: 0 }))
        ])
      ])
    ]
  })
  export class AppComponent {
    bindingVar = '';
    fadeIn() {
      this.bindingVar = 'fadeIn';
    }
    fadeOut() {
      this.bindingVar = 'fadeOut';
    }
    toggle() {
      this.bindingVar == 'fadeOut' ? this.fadeIn() : this.fadeOut();
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>