0

I'm Trying to add animations to my angular 2 application but it's not working, i tried using an example i got from the internet and i researched a bit but i didn't find anything, please anyone help me.

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

@Component({
  selector: 'app-root',
  styles: [`
    .container {
      background-color: white;
      border: 10px solid black;
      width: 200px;
      text-align: center;
      font-size: 50px;
      box-sizing: border-box;
      overflow: hidden;
    }
  `],
  animations: [
    trigger('openClose', [
      state('collapsed', style({ height: '0px', color: 'red' })),
      state('expanded', style({ height: '100px', color: 'lightgreen' })),
      transition('expanded <=> collapsed', animate(500))
    ])
  ],
  template: `
    <button (click)="expand()">Expand</button>
    <button (click)="collapse()">Collapse</button>
    <hr />
    <div class="container" [@openClose]="animationState">
      Look at this box
    </div>
  `
})
export class AppComponent {
  animationState: string;

  constructor() {
    this.collapse();
  }

  expand() {
    this.animationState = 'expanded';
  }

  collapse() {
    this.animationState = 'collapsed';
  }
}
Ali ElZein
  • 1
  • 2

1 Answers1

1

From angular Animations docs:

Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it. For other browsers, a polyfill is required. Grab web-animations.min.js from GitHub and add it to your page.

You can see browsers that support it here: http://caniuse.com/#feat=web-animation

For all other browsers (including Safari) download and install polyfill

[edit]On how to install polyfill in angular see this answer

trojan
  • 1,465
  • 19
  • 27