Question

我正在使用版本4.1.3的角度动画

以下是代码：

@Component({
  selector : 'my-fader',
  animations: [
    trigger('visibilityChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
    ])
  ]
...

现在，我想提供现有的类名，而不是 style ，即使用样式表中定义的类（即非内联样式）

这可能吗？如果是这样，请帮忙。

Answer 1

你做不到。我也在寻找类似的解决方案。

Angular Animations使用Web Animations API而不是CSS。

有关详细信息，请参阅https://css-tricks.com/css-animations-vs-web-animations-api/。

Answer 2

你不能给它CSS类，但你可以做这样的事情

trueObject = { opacity: 1, transform: 'scale(1.0)' };
falseObject = { opacity: 0, transform: 'scale(0.0)'  };
@Component({
  selector : 'my-fader',
  animations: [
    trigger('visibilityChanged', [
      state('true' , style(trueObject)),
      state('false', style(falseObject)),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
    ])
  ]

Answer 3

创建一个常量并将其作为常规导入导入，如下所示：

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

export const myAnimation =
  trigger('visibilityChanged', [
    state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
    state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
    transition('1 => 0', animate('300ms')),
    transition('0 => 1', animate('900ms'))
  ]);

然后在任何需要的地方导入并使用它：

import { fadeAnimation } from 'LOCALIZATION_OF_IT';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [fadeAnimation]
})

如何在角度2/4中给动画状态赋予类名？

3 个答案: