I am trying to achieve a simple animation with angular. On the click of the button I change the state of showState from to shown. Since I am using *ngIf I have used void keyword in the animation and yet it is not working.

STACKBLITZ

CSS

p {
  border: 1px solid black;
  background-color: lightblue;
  padding: 10px;
}

appponent.ts

import { showStateTrigger } from './animations';
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./appponent.html",
  styleUrls: ["./appponent.scss"],
  animations: [
    showStateTrigger
  ]
})
export class AppComponent {
  isShown = false;
}

HTML

<button (click)="isShown = !isShown">Toggle Element</button>
<p [@showState]="isShown ? 'shown' : 'notShown'" *ngIf="isShown"> You can see me now!</p>

Animations.ts

import { state, style, transition, trigger, animate } from "@angular/animations";

export const showStateTrigger = trigger("showState", [

  transition('void => shown', [
    style({
      opacity: 0
    }),
    animate(2000, style({
      opacity: 1
    }))
  ])

]);

I am trying to achieve a simple animation with angular. On the click of the button I change the state of showState from to shown. Since I am using *ngIf I have used void keyword in the animation and yet it is not working.

STACKBLITZ

CSS

p {
  border: 1px solid black;
  background-color: lightblue;
  padding: 10px;
}

app.ponent.ts

import { showStateTrigger } from './animations';
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.ponent.html",
  styleUrls: ["./app.ponent.scss"],
  animations: [
    showStateTrigger
  ]
})
export class AppComponent {
  isShown = false;
}

HTML

<button (click)="isShown = !isShown">Toggle Element</button>
<p [@showState]="isShown ? 'shown' : 'notShown'" *ngIf="isShown"> You can see me now!</p>

Animations.ts

import { state, style, transition, trigger, animate } from "@angular/animations";

export const showStateTrigger = trigger("showState", [

  transition('void => shown', [
    style({
      opacity: 0
    }),
    animate(2000, style({
      opacity: 1
    }))
  ])

]);

• javascript
• css
• angular
• animation
• angular-animations

4 Answers 4

So, I figured it out myself. I was missing :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

in appModule.ts

It is strange that angular doesn't plain about it. No errors. No Warnings.

You shouldn't use both [@showState]="isShown ? 'shown' : 'notShown'" and *ngIf="isShown at the same time. especially when notWhosn isn't a registered state.

Your code should look as follows:

@Component({
  selector: 'app-root',
  template: `
     <button (click)="isShown = !isShown">Toggle Element</button>
     <p @enterAnimation *ngIf="isShown"> You can see me now!</p>`
  ,
  animations: [
    trigger(
      'enterAnimation', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        style({ opacity: 1 }),
        animate('500ms', style({ opacity: 0 }))
      ])
    ]
    )
  ],
})
export class AppComponent {
  isShown = false;
}

I was having the same issue, and it turned out that animations were disabled on a parent ponent with [@.disabled]="true"

if you want to use *ngIf you need to use :enter and :leave.

pay attention to this link:

https://angular.io/guide/transition-and-triggers#use-ngif-and-ngfor-with-enter-and-leave

animations: [
  trigger('showState', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('2s', style({ opacity: 1 })),
    ]),
    transition(':leave', [
      animate('2s', style({ opacity: 0 }))
    ])
  ]),
]

<p @showState *ngIf="isShown"> You can see me now!</p>