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

<div  [hidden]="visible"> 

and want it to fade out on visible change...

tx

Sean

Answer 1

Sorry I'm a little late to the party on this one.

This is a super easy way to do it and I've implemented this in my application. Use CSS3 animations by adding and subtracting classes.

First in your component css file:

.show{ opacity: 1 !important; } .step{ opacity: 0; transition: .5s ease-in-out all; } 

Next, conditionally add your class to an element.

<div [class.show]="!booleanFromComponentClass" class="step">   <h4>All of these elements will be faded out using a CSS3 opacity transition.</h4>   <div>      this element will fade out also when the booleanFromComponentClass variable is false   </div> </div> 

You can also take advantage of any property including making an element's position relative and animating a slide off of the page.

If Angular2 ever implements animations, I can guarantee they are using CSS3 animations by conditionally adding and subtracting classes.

Answer 2

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

In html template

<a (click)="toggle()">toggle state</a>  <div [@visibilityChanged]="visiblityState" >        some content </div> 

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