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

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.

  
All of these elements will be faded out using a CSS3 opacity transition.
  

     this element will fade out also when the booleanFromComponentClass variable is false
  

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.