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

Css only solution. Add class 'step' and [class.show]="fadeInIfTrue" to block you want to fade.

css:

.step {
  display: none;
  opacity: 0;

  &.show {
    display: block;
    transform: scale(1);
    opacity: 1;
    animation: anim .7s ease-in-out;
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transition: .7s ease-in-out all;
  }
  100% {
    opacity: 1 !important;
  }
}

source - https://jdsteinbach.com/css/snippet-animate-display-transform/