Angular 8，同时在多个不同元素上的多个不同动画答案

【问题标题】：Angular 8, multiple different animations on multiple different elements at the same timeAngular 8，同时在多个不同元素上的多个不同动画
【发布时间】：2020-05-12 05:33:25
【问题描述】：

我有一个 div，其中包含一些我需要为其位置设置动画的内容，到目前为止一切都很好。但是该 div 中的另一个元素也需要自己的动画，与主动画分开。问题是当我尝试为它创建两个不同的动画时，使用相同的触发器，第一个动画有效，但第二个动画没有动画，只有在第一个动画完成后才跳到它的最终位置。

这是我的 HTML 文件：

<div [@moveAvatar]='state' class="contents">

  <ngx-avatar class="avatar" src="./assets/image.jpg" size="80"></ngx-avatar>

  <div class="text" [@moveText]='state'>
    <h1 class="titel"> title</h1>
    <p class="subtitel">subtitle</p>
  </div>

</div>

还有我的打字稿：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [

    trigger('moveAvatar', [
      state('maximum', style({
        top: '15%',
        left: '80%',
        textAlign: 'right',
      })),
      transition('* => maximum', animate('1s ease-in-out')),
    ]),

    trigger('moveText', [
      state('maximum', style({
        top: '10%',
        left: '90%',
        transform: 'translate(-100px, -75px)',
      })),
      transition('* => maximum', animate('1s ease-in-out')),
    ])

  ]
})

目前这是两个动画的样子：

我做错了什么？

附言我假设 textAlign 不能动画？如您所见，它已包含在内，但它也会跳转。

【问题讨论】：

标签： html css angular typescript animation

【解决方案1】：

解决方案：使用一个内部带有 group() 的触发器：

trigger('moveAvatar', [
      transition('* => maximum', [
        group([
          animate('800ms ease-in-out',
            style({
              top: '15%',
              left: '90%',
            })
          ),
          query('.text', [
            animate('800ms ease-in-out',
              style({
                top: '10%',
                left: '90%',
                transform: 'translate(-170px, -75px)',
              })
            ),
          ]),
          query('.titel', [
            animate('1s ease-in-out',
              style({
                transform: 'translate(50px, 0)',
              })
            ),
          ])
        ])
      ])
    ])

【讨论】：