有条件地改变一个组件的animation

Question

我想让一个组件有条件地选择 animation 到变量 inc 的值。 但是即使实现的值发生变化 animation 始终保持不变，也不会捕获到变化。

    trigger('slideInOut', [
  transition(':enter', [
    style({transform: 'translateY(75%)'}),
    animate('400ms ease-in', style({transform: 'translateY(0%)', backgroundColor:"red"}))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({transform: 'translateY(-75%)'}))
  ])
]),
trigger('slideInOutReverse', [
  transition(':enter', [
    style({transform: 'translateY(-75%)',backgroundColor:"blue"}),
    animate('400ms ease-in', style({transform: 'translateY(0%)'}))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({transform: 'translateY(75%)'}))
  ])
])

<div *ngIf="hide" [@slideInOut]="inc" [@slideInOutReverse]="!inc">{{mapLength}} </div>

Answer 1

您需要删除括号，因为您有 ngif 指令，如下所示：

<div *ngIf="hide" @slideInOut>{{mapLength}}</div>

而且您不必使用 @slideInOutReverse，因为您使用别名：enter 来定位插入到视图中的 HTML 个元素，并在删除时使用：leave。

看官方文档

Answer 2

您可以有条件地使用正确的 animation 呈现元素，例如

<div *ngIf="hide && inc" [@slideInOut]>{{mapLength}} </div>
<div *ngIf="hide && !inc" [@slideInOutReverse]>{{mapLength}} </div>

我一直在使用声明性 animation 语法处理条件或动态值时遇到问题，就像您在此处所做的那样，但这也许会有所帮助。