Angular 2 - Animation transition not working

Question

I need a transition between 2 colors OnClick. Right now, this is my code:

Typescript

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

This does change the background-color as it should. The change, however, is instant instead of a transition.

I am using the Chrome, latest version.

Answer 1

This bit me for the longest time, and what fixed it was changing my state variable from a boolean type to a string type. So - instead of tracking true and false, track 'true' and 'false'. Per Angular's docs:

An animation state is a string value that you define in your application code.

Change your MenubarComponent class to this:

export class MenubarComponent {
  menuActive: string = 'false';
  onMenuClick () {
    if (this.menuActive === 'false') {
      this.menuActive = 'true';
    } else {
      this.menuActive = 'false';
    }
  }
}

I think it's dumb. Booleans are obviously good options for binary states.

More info: https://angular.io/guide/animations#states-and-transitions

Answer 2

Expanding on the answer that Aaron Krauss provided. It is having issues with the direct interpretation of the true / false values; however, if you would rather not reference a string context, you can replace true and false in the above with the numbers 1 (true) and 0 (false). This proved to fix my issue and didn't require any annoying string interpretations.

trigger('menubarState', [
    state('0', style({backgroundColor:'#43a047'})),
    state('1', style({backgroundColor:'#333'})),
    transition('0 => 1', animate('1s')),
    transition('1 => 0', animate('1s'))
])

Answer 3

Expanding even more on Aaron Krauss' answer: I don't want to transform my booleans into strings, so I defined a getter:

public menuActive: boolean = false;

get menuState() {
  return this.menuActive ? 'active' : 'inactive'
}

And then in your animation definition (I merged the transitions since they are the same):

animations: [
  trigger('menubarState', [
    state('inactive', style({backgroundColor:'#43a047'})),
    state('active', style({backgroundColor:'#333'})),
    transition('inactive <=> active', animate('1s'))
  ])
]

And to be complete, the template:

<li [@menubarState]="menuState" (click)="onMenuClick()">
  <a><span class="material-icons icon">apps</span></a>
</li>

Answer 4

make sure that you import BrowserAnimationsModule in app.module.ts file.

Answer 5

I have used animation while routing/clicking in angular 2.It works for onClick also. Use this code for all types of routing, You can use separate animation for separate route change or onclick.

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        backgroundColor:'#43a047',
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        backgroundColor:'#333',
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        backgroundColor:'red',
        transform: 'translateY(100%)'
      }))
    ])
  ]);

You can also modify the above code according to your choice.

Answer 6

I dont know if my response solve this question but I will say if you use Ionic/Angular trigger/transition not work but yes only trigger/state.

If you using Ionic/angular you should work with Ionic Animations. https://ionicframework.com/docs/utilities/animations

Answer 7

i cant understand why this setup returns me a white page . If i remove the transition() it works well

import { state, style, transition, trigger } from '@angular/animations';
import { Component } from '@angular/core';
// import { reduce } from 'rxjs-compat/operator/reduce';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('divState', [
      state('normal', style({
        backgroundColor: 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        backgroundColor: 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal => highlighted', animate(300)),
      transition('highlighted => normal', animate(800))
    ])
  ]
})
export class AppComponent {
  anim='normal';
  list = ['Milk', 'Sugar', 'Bread'];
  onAnimate(){
    this.anim == 'normal' ? this.anim='highlighted' : this.anim ='normal';
    
  }

    onAdd(item) {
      this.list.push(item);
    }
}
function animate(arg0: number): any {
  throw new Error('Function not implemented.');
}

Answer 8

Can't you use CSS?

EX:

<!DOCTYPE html>
<html>
<head>

    <style>
    div {
       background-color: #FF0;
       height: 200px;
       width: 100px;
      animation: fontbulger 2s infinite;
    }

    @keyframes fontbulger {
     0% {
       background-color: blue;
     }
     50% {
       background-color: red;
     }
     100% {
       background-color: blue;
    }
    }
    </style>
    <title>test</title>
</head>
<body>
    <div></div>
</body>
</html>