CODEWITHSUNDEEP
angular
leccepen
leccepen

Reputation: 67

How can I add animation to angular project

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).

Upvotes: 0

Views: 1056

Answers (2)

N.Tasikj
N.Tasikj

Reputation: 386

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.

Upvotes: 1

Sumit Parakh
Sumit Parakh

Reputation: 1143

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/#/

Upvotes: 0

Related Questions