角11不适用不同状态的多重跃迁

Question

我正在尝试创建一个卡片的动画，里面有多个孩子，每个孩子都有自己的进入动画。我在动画中是新的有角度的，所以我的想法是在相同的触发器中为主div中的每个孩子创建不同的状态。

这是动画的类型记录代码：

    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正在应用，但只有过渡可视<=>隐藏才能真正工作，img突然出现，selected <=>未选择的转换--就像没有被识别。让我感到困惑的是，如果我删除了visible <=>隐藏的转换，只留下selected <=>未选择的，那么它实际上是有效的。我在这里出什么错了？

Answer 1

不介意，我想出来了。经过一些研究后，我发现，由于某种原因，当组件是动画时，除非使用animateChild() api，否则会阻塞子组件的动画。因此，我为每个子程序创建了多个触发器，并更改了转换，未选择的<=>选择的代码如下：

transition('unselected <=> selected', [
    group([
        query('@icon', animateChild()),
        query('@title', animateChild()),
        query('@background', animateChild()),
        animate('200ms ease-in-out')
    ])
])

如您所见，我用query()指定了我想要动画的子元素的触发器，以及api animateChild()。将澄清改为https://angular.io/api/animations/animateChild。