Html 角度11不应用具有不同状态的多个变换

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

这是动画的typescript代码：

    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')
            ])
        ])
    ]

动画：[
触发器（'选择'[
状态（'selected'，样式({
变换：“比例（1.2）”，
marginLeft:'60px'，
marginRight:'60px'
})),
状态（'未选择'），样式({
转换：'*'，
marginLeft:“*”，
marginRight:“*”
})),
状态（'可见'），样式({
不透明度：“1”
})),
状态（'hidden'，样式({
不透明度：“0”
})),
转换（'可见隐藏'[
设置动画（“200ms缓进缓出”）
]),
转换（'选定未选定'[
设置动画（“100毫秒缓进缓出”）
])
])
]

下面是我如何将其绑定到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>

{{name（）}}

我希望看到的是缩放的主div，同时img显示淡入淡出动画。

---

实际发生的情况是图像出现，因此应用了不透明度：1，但只有过渡可见隐藏实际起作用，img突然出现，而选中未选中的过渡好像无法识别。让我困惑的是，如果我删除了可见隐藏转换，只保留选中未选中，它实际上会起作用。我到底做错了什么？

没关系，我明白了。经过一些研究，我发现，出于某种原因，在为组件设置动画时，如果不使用

animateChild（）

api，则会阻止子组件的动画。因此，我为每个孩子创建了多个触发器，并更改了转换未选中选中的代码，如下所示：

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

transition（'unselected selected'[
团体([
查询（'@icon'，animateChild（）），
查询（'@title'，animateChild（）），
查询（'@background'，animateChild（）），
设置动画（“200ms缓进缓出”）
])
])

正如您所看到的，我使用

query（）

指定了要设置动画的子对象的触发器，以及api

animateChild（）

。有关澄清，请阅读