Property 'currentState' does not exist on type 'FadeblockComponent'

Question

I am working on animations in Angular, and am running into an issue where the block will not fade out.
HTML in fadeblock:

<div class="fadeBlock mx-auto" [@changeState]="currentState"></div>

Component file:

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

import { fadeAnimation } from '../animations';

@Component({
selector: 'app-fadeblock',
templateUrl: './fadeblock.component.html',
styleUrls: [ './fadeblock.component.scss' ],
 animations: [
trigger('changeState', [
  transition('void => *', [
      useAnimation(fadeAnimation, {
          params: {
              delay: '1000ms',
              from: 1,
              to: 0,
              time: '1s'
          }
      })
  ])
  ])
  ]
})
export class FadeblockComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}

and fadeAnimation:

import {
animation, trigger, animateChild, group,
transition, animate, style, query
} from '@angular/animations';


export const fadeAnimation = animation([
style({
    opacity: '{{ from }}'
}),
animate('{{ time }} {{ delay }} ease-in-out', style({
    opacity: '{{ to }}'
})),
]);

If I change the opacity in the css file, the block will just stay and not move. I get no errors when running ng serve, but do when I try to run ng build --prod Any assistance is greatly appreciated as I try to learn Angular.

does the animation work? I don't see any triggers. – Avin Kavish Jun 14 '19 at 12:28 — Avin Kavish, Jun 14 '19 at 12:28
@AvinKavish no, the animation does not work currently – Jim Jun 14 '19 at 12:37 — Jim, Jun 14 '19 at 12:37

Harun Yilmaz · Accepted Answer · 2019-06-14T13:48:36.177

2

You need to define a currentState property in FadeblockComponent to change the animation state.

export class FadeblockComponent implements OnInit {

    currentState; // it is null since you set transition from void to *

    constructor() { }

    ngOnInit() {
       this.currentState = 'entered'; // or whatever the state you want since you set ending transition to *
    }

}

Here's a working stackblitz project: https://stackblitz.com/edit/angular-cjyblw

edited Jun 14 '19 at 13:48

answered Jun 14 '19 at 12:27

Harun Yilmaz

8,281
3
24
35

Thanks @Harun, that fixed my error, any ideas on why the animation is not working? – Jim Jun 14 '19 at 13:07
Edited the answer, added stackblitz link – Harun Yilmaz Jun 14 '19 at 13:48

Property 'currentState' does not exist on type 'FadeblockComponent'

1 Answers1