Свойство 'currentState' не существует для типа 'FadeblockComponent' - PullRequest
Новая
       14

Свойство 'currentState' не существует для типа 'FadeblockComponent'

0 голосов
/ 14 июня 2019

Я работаю над анимацией в Angular и столкнулся с проблемой, из-за которой блок не исчезнет.
HTML в fadeblock: 

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

Файл компонента: 

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() {
}

}

и 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 }}'
})),
]);

Если я изменю непрозрачность в файле css, блок просто останется и не будет двигаться. Я не получаю ошибок при запуске ng serve, но когда я пытаюсь запустить ng build --prod Любая помощь очень ценится, когда я пытаюсь выучить Angular.

1 Ответ

1 голос
/ 14 июня 2019

Вам необходимо определить свойство currentState в FadeblockComponent, чтобы изменить состояние анимации. 

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 *
    }

}

Вот рабочий проект стекаблита: https://stackblitz.com/edit/angular-cjyblw

...