在Angular 2中,是否可以淡入/淡出而不是[hidden ='xxx]？

在组件中

    //other imports..
    import { trigger, state, transition, style, animate } from '@angular/animations';

    @Component({
      selector: 'some-selector',
      templateUrl: 'my-template.html',
      animations: [
        trigger('visibilityChanged', [
          state('shown', style({ opacity: 1 })),
          state('hidden', style({ opacity: 0 })),
          transition('shown => hidden', animate('600ms')),
          transition('hidden => shown', animate('300ms')),
        ])
      ]
    })
    export class MyComponent {
      visiblityState = 'hidden';
      toggle() {
        if (this.visiblityState === 'hidden')
          this.visiblityState = 'shown';
        else
          this.visiblityState = 'hidden';
      }
    }