Angular 如何重新初始化/重新触发使用动画系统制作的动画？

我是新来的

@angular/animations

，现在我发现了一些东西。我有一个简单的列表，当你选择一个项目时，它会显示一个子列表，两个列表都有相同的动画，但是如果在第一个列表中选择一个不同的项目，第二个列表不会再次动画。我尝试将第二个列表分配给

null

，然后给出新的值，我认为这足以再次触发动画

我使用的一种解决方法是

setTimeout

，它在分配新值之前等待100ms，工作正常，但屏幕会闪烁，下面是我的代码：

MY COMPONENT.HTML：

靠动物
{{serv.type}

服务：{{selectedType}
{{serv.name}

MY COMPONENT.TS：

从“离子角度”导入{IonicPage，NavController，NavParams}；
从“@angular/animations”导入{触发器、样式、过渡、动画、关键帧、查询、交错}；
@IonicPage（）
@组成部分({
选择器：“页面代理”，
templateUrl:“agendar.html”，
动画：[
触发器（“listAnimation”[
转换（“*=>*”[
查询（“：enter”，样式（{opacity:0}），{optional:true}），
质疑(
“：输入”，
错开（“300毫秒”[
生动活泼(
“.7s轻松进入”，
关键帧([
样式（{不透明度：0，变换：“translateX（-75%）”，偏移量：0}），
风格({
不透明度：0.5，
转换：“translateX（25px）”，
偏移量：0.3
}),
样式（{opacity:1，transform:“translateY（0）”，偏移量：1.0}）
])
)
]),
{可选：true}
)
])
])
]
})
导出类代理页面{
公共服务：数组=[]；
公共选择类型：字符串；
公共选择类型服务：任何[]；
构造函数（）{}
setSelectedType=服务=>{
this.selectedType=null；
设置超时（（）=>{
this.selectedTypeServices=service.services；
this.selectedType=service.type；
}, 100);
};
}

---

那么，有没有办法重新初始化或重新触发动画？可能我缺少了一些选项，除了

trigger（）

或诸如此类的函数之外，还有一个不同的函数？

我认为，你的动画没有“重新触发”的主要原因是你的角度动画的状态配置。有两种处理角度动画的方法：

1.状态方法

trigger('cube', [
  state('front', style({
    transform: 'rotateX(0deg)',
  })))

trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style({transform: 'translateY(-100%)', opacity: 0}),
      animate('500ms', style({transform: 'translateY(0)', 'opacity': 1}))
    ]
  ))

2.转换方法

trigger('cube', [
  state('front', style({
    transform: 'rotateX(0deg)',
  })))

trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style({transform: 'translateY(-100%)', opacity: 0}),
      animate('500ms', style({transform: 'translateY(0)', 'opacity': 1}))
    ]
  ))

你似乎把两者混为一谈，我相信这就是你的问题的根源

如果对html使用状态方法，可以这样说：

HTML

<div [@cube]="state">

<div *ngIf="hasUpload=='yes'" [@myAnimation]>

例如，您可以将ngOnInit（）上的状态初始化为bottom或front，然后打开click或类似的开关。请注意，之所以会出现动画，是因为元素正在更改“状态”，而该变量正在指示更改

如果选择转换方法，则会出现如下情况：

HTML

<div [@cube]="state">

<div *ngIf="hasUpload=='yes'" [@myAnimation]>

请注意，此处的区别在于，动画是基于是否显示元素而发生的。因此ngIf语句中的变量指示动画是否会发生

---

当您使用

[@listAnimation]=“services.length”

时，据我所知，services.length是无用的，因为您使用的是转换方法而不是状态。我相信，通过使用state方法并根据单击列表上的服务更改状态，可以完成您想要做的事情。然后切换状态，动画应该出现。你基本上已经在超时了，这就是它在某种程度上起作用的原因。因此，不要使用超时，而是使用三元操作来触发状态，这样就可以开始了。希望这能消除一些歧义！祝你好运D

您的解释解决了我的问题，使用了

服务。length

没有再次设置动画，因为在大多数情况下，我的数组大小相同，从

[@listAnimation]=“services.length”

更改为

selectedType

，并为我解决了问题。我将尝试一些不同的代码来更好地理解您所解释的内容，但无论如何，非常感谢