Why isn't my animations working in angular?

Question

main.component.ts

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  animations: [
    trigger('optionState', [
      state('inactive', style({
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }))
    ])
  ]
})
export class MainComponent implements OnInit {
  public state = "inactive"
  constructor() { }

  ngOnInit() {
  }

  show() {
    this.state = "active"
  }
}

main.component.html

<div [@optionState]="state"
     (click)="show()">
  lol
</div>

package.json

  "dependencies": {
    "@angular/animations": "^4.4.5",
    "@angular/common": "^4.4.5",
    "@angular/compiler": "^4.4.5",
    "@angular/core": "^4.4.5",
    "@angular/forms": "^4.4.5",
    "@angular/http": "^4.4.5",
    "@angular/platform-browser": "^4.4.5",
    "@angular/platform-browser-dynamic": "^4.4.5",
    "@angular/router": "^4.4.5",
  }

Ok, I am just messing around in angular trying to get animations to work. But for some reason. IT DOESN'T, I have no idea why. In my app module I imported the BrowserAnimationsModule. I'm using the chrome browser.

EDIT - btw, this produces no errors, so I have no idea how to even go about debugging this.

Vega · Answer 1 · 2017-10-18T06:07:35.890

You miss the transition animation from * to * states:

HTML:

 ...
 animations:[
    trigger('optionState', [
      state('inactive', style({
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]

Also, to bring back the initial state:

Typescript:

  show() {
    this.state = this.state == "active" ? "inactive" : "active"
  }

DEMO

Why isn't my animations working in angular?

1 Answers1