angular - CSS3 动画不适用于 Angular 4

Question

为什么 css3 动画在 Angular 4 中不起作用？我必须启用一些属性？我尝试导入 BrowserAnimationModule 但没有任何结果。我搜索了很多，但我发现的只是使用 Angular 方法来显示动画。

这是我的 HTML 代码

<div class="score-addition" *ngIf="(game.lastScore | async) > 0">{{'+' + (game.lastScore | async)}}</div>

和我的 CSS 类

.score-addition {
position: absolute;
right: 30px;
color: red;
font-size: 25px;
line-height: 25px;
font-weight: bold;
color: rgba(119, 110, 101, 0.9);
z-index: 100;
-webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in;
animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }

但是动画不工作。
我也试过没有成功:

<div class="score-addition" [hidden]="(game.lastScore | async) == 0">{{'+' + (game.lastScore | async)}}</div>

Answer 1

按照我的评论:您可以使用 Angular 4 built-in animation做你想做的事。我只给你代码，对于 CSS，我会让你选择你的属性。

您需要在组件装饰器中添加 animate 属性。 (此外，请记住从 @angular/animations 导入关键字)

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

现在你的装饰器:

@Component({
  selector: 'YourSelector',
  templateUrl: 'your HTML template path',
  styleUrls: ['your CSS file path'],
  animations: [
    trigger('moveUp', [
      state('void', style({
        // Add the CSS for the hidden state here. Here is 2 examples (camelCase for properties of more than 1 word)
        height: '0',
        borderBottom: 'none'
      })),
      state('*', style({
        // Here, add the CSS of the visible state. You can use the * wildcard to tell Angular 'calculate the value of the height for me'
        height: '*',
        borderBottom: '*'
      })),
      // animate format: 'DURATION [DELAY] EASING-FUNCTION'
      transition(':enter', animate('275ms ease-out')),
      transition(':leave', animate('275ms 275ms ease-in'))
    ])
  ]
})

现在，在您的 HTML 中，您需要做的是

<div class="score-addition" [@moveUp]="(game.lastScore | async) > 0" *ngIf="(game.lastScore | async) > 0">{{'+' + (game.lastScore | async)}}</div>