Apply CSS transition to element in Angular

I think you're better off using an angular animation. It's more flexible:

This is one I'm using:

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

export const FadeInOutAnimation =
  trigger('fadeInOut', [
    state('in', style({
      'opacity': '1',
    })),
    state('out', style({
      'opacity': '0',
    })),
    transition('in => out', [
      group([
        animate('600ms ease-in-out', style({
          'opacity': '0'
        })),
      ])
    ]),
    transition('out => in', [
      group([
        animate('600ms ease-in-out', style({
          'opacity': '1'
        })),
      ])
    ]),
  ]);

And use it:

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.scss'],
  animations: [
    FadeInOutAnimation
  ]
})
export class PopupComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
  }

  @Input() dialogVisible: boolean;

}

<div class="popup-background" [@fadeInOut]="dialogVisible"></div>
<div class="popup-content form-control-normal" [@fadeInOut]="dialogVisible">
  <ng-content></ng-content>
</div>

But I think you still have to add the display: block and display: none to the states.

Set the styles in css:

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 1000ms;
}

.fade-in {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 1000ms;
}

And apply the class in the popup component's HTML:

<div class="container" [class]="active ? 'fade-in' : 'fade-out'">

Check this Stackblitz: https://stackblitz.com/edit/angular-ivy-5whet6?file=src/app/popup/popup.component.html