CSS3动画不适用于角度4答案

【问题标题】：CSS3 animations not working on angular 4CSS3动画不适用于角度4
【发布时间】：2017-11-08 17:42:50
【问题描述】：

为什么 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>

【问题讨论】：

您能更深入地解释您的问题吗？ Angular 不限制 HTML 5 或 CSS 3 的使用，只有您的浏览器会这样做。所以，请编辑你的问题！
@trichetriche 我已经更新了我的问题。
首先，我认为animation 需要keyframes 属性。其次，您要制作什么动画？您是想在开始时为 div 设置动画，还是希望在隐藏时对其进行动画处理？
@trichetriche 我在 angularjs 应用程序中使用过这个动画，它可以工作，我想在game.lastScore > 0 时为 div 设置动画。
AngularJS 不是 Angular。而且我很确定您忘记了 AngularJS 应用程序中的 @keyframes move-up css 块。此外，当您使用 *ngIf 时，会从 DOM 中删除 div。将其视为display: none。由于您无法为显示属性设置动画，这可能会解释您的问题。 Angular 有一个关于动画的完整教程，但如果你愿意，我可以给你一个已经编好的教程？

标签： angular css css-animations

【解决方案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>

【讨论】：

啊好吧！谢谢！