Question

为什么css3动画在角度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，我会让你选择你的属性。

您需要在Component装饰器中添加@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'))
    ])
  ]
})

现在为你的装饰者：

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

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

C-c z c - create
C-c z v - view

CSS3动画不适用于角度4

1 个答案: