How can I add animation to angular project

Question

I'm learning now angular and I have tried to add some animation to basic project from example on the Angular site. There is some example with code and I don't know what I should type under // animation triggers go here in the app.component.ts file. I have tried to add animations: [trigger('openClose')] but it changes nothing. The example is from the angular site: https://angular.io/guide/animations. Thank you very much in advance for your answers!

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [trigger('openClose')]
})
export class AppComponent {
  title = 'My-Site';
}

The rest of code is the same like in the link on the bottom of the site (code review section with files open-close.component.ts, html and css file).

Answer 1

You can use stackblitz demo mentioned in the angular animation guide

Since you are beginner in it, i would suggest you to go through this demo and do some digging on it and observe the output. You will understand it eventually.

One more working example of Angular animation to explain different scenario where you can apply animation in Angular:-

http://animationsftw.in/#/

Answer 2

No, that example is not from angular site, read whole page and you will have some basic knowledge how it works.

In animations: [] you are defining states, triggers, animations, etc. but in HTML you need to define where you will use them.

So if you have animation defined as openClose in animations: []

animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],

you can use it in HTML as:

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

where isOpen will be some variable that will trigger Open and Close states.