Angular 8, несколько разных анимаций на нескольких разных элементах одновременно

Question

У меня есть 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')),
    ])

  ]
})

в настоящее время вот как выглядят две анимации:

что я делаю не так?

PS Я полагаю, textAlign не может быть анимирован? как вы видите, он включен, но тоже прыгает.

Answer 1

решение: используйте один триггер с группой () внутри:

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