我终于明白了。经过一些研究，我发现，由于某种原因，当组件设置动画时，会阻止子级的动画，除非您使用
我正在尝试创建一个卡片的动画，里面有多个子卡片，每个子卡片都有自己的回车动画。我是动画界的新手，所以我想在同一个触发器中为主分区中的每个孩子创建不同的状态。
这是动画的打字脚本代码：
animations: [
trigger('select', [
state('selected', style({
transform: 'scale(1.2)',
marginLeft: '60px',
marginRight: '60px'
})),
state('unselected', style({
transform: '*',
marginLeft: '*',
marginRight: '*'
})),
state('visible', style({
opacity: '1'
})),
state('hidden', style({
opacity: '0'
})),
transition('visible <=> hidden', [
animate('200ms ease-in-out')
]),
transition('selected <=> unselected', [
animate('100ms ease-in-out')
])
])
]
这就是我将其绑定到html:的方式
<div id="game-box" [@select]="isSelected ? 'selected' : 'unselected'">
<div id="game-box__rounded">
<img [@select]="isSelected ? 'visible' : 'hidden'" [src]="icon()" alt="">
<label *ngIf="isSelected" for="">{{ name() }}</label>
</div>
<span class="background" [ngStyle]="{ 'background-image': 'url(' + background() + ')'}"></span>
</div>
我希望看到的是主div进行缩放，同时img显示为淡入淡出动画。实际发生的情况是图像出现，因此应用了不透明度：1，但只有可见的过渡<>hidden实际工作时，img突然出现，选择<>未选中的转换就像未被识别一样。让我困惑的是，如果我删除可见<>隐藏转换，只保留选中的<>如果未选中，它实际上是有效的。我做错了什么？
animateChild()api。因此，我为每个孩子创建了多个触发器，并更改了未选中<>所选代码如下：
transition('unselected <=> selected', [
group([
query('@icon', animateChild()),
query('@title', animateChild()),
query('@background', animateChild()),
animate('200ms ease-in-out')
])
])
如您所见，我用query()指定了要设置动画的子对象的触发器，以及apianimateChild()。如需澄清，请阅读https://angular.io/api/animations/animateChild.