Angular 11 不应用具有不同状态的多个转换答案

【问题标题】：Angular 11 not applying multiple transitions with different statesAngular 11 不应用具有不同状态的多个转换
【发布时间】：2021-07-30 04:15:01
【问题描述】：

我正在尝试创建一个包含多个孩子的卡片动画，其中每个孩子都有自己的进入动画。我是角度动画的新手，所以我想在同一个触发器中为主 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 以及淡入淡出的动画。实际发生的是图像出现了，所以 opacity: 1 正在应用，但只有过渡 visible hidden 真正起作用，img 突然出现并且已选择未选择 过渡就像无法识别一样。让我感到困惑的是，如果我删除 visible hidden 过渡，只留下 selected unselected，它实际上可以工作。我在这里做错了什么？

【问题讨论】：

标签： html css angular typescript animation

【解决方案1】：

没关系，我想通了。经过一番研究，我发现 angular，由于某种原因，当一个组件被动画时，会阻止孩子的动画，除非你使用animateChild() api。因此，我为每个孩子创建了多个触发器，并更改了转换 unselected selected 代码，如下所示：

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。

【讨论】：