Animate.css is my favorite css library to easily add nice open/close or fade effects with css3. Here a few steps on how to add it to your Angular project.
Run the following:
npm install animate.css
To the styles section of your angular.json add:
{
"input": "node_modules/animate.css/animate.min.css"
}
To your global.scss file (or whatever your global scss file is:
/* animate.css */
@import '~animate.css/animate.min.css';
You are ready to add classes!
<div *ngIf="profilePaneOpen" class="animate__animated animate__fadeIn">