In Angular 2, is it possible to fadeIn / fadeout instead of [hidden='xxx]?

Question

In Angular 2, is it possible to fadeIn / fadeout instead of [hidden=\'xxx]?

I have snippet of

and wa

Answer 1

If anyone come here to find angular solution to do the stuff, here you go

In html template

toggle state

    
   some content

In component

    //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';
      }
    }