有没有一种方法可以与关键帧并行运行角度动画?

时间:2020-09-30 10:06:52

标签: angular typescript angular-animations

我有2个具有关键帧的触发器,如何并行运行这些动画? 如果我现在运行它,则首先将启动表单容器动画,然后将开始登录表单动画。

component.html

    <div [@form-container]="canShowLogin ? 'move' : 'default'" class="register-container">
      <app-register-page [@login-form]="canShowLogin ? 'move' : 'default'"></app-register-page>
      <app-login-page [@login-form]="canShowLogin ? 'default' : 'move'"></app-login-page>
    </div>

animations.ts

 trigger('form-container', [
    state('default', style({
      right: 0,
      left: 'unset',
    })),
    transition('default => move', [
        animate(
          '1.2s ease',
          keyframes([
            style({right: '40%', offset: 1}),
          ])
        )
    ]),

    state('move', style({
      left: 0,
      right: 'unset'
    })),
    transition('move => default', [
        animate(
          '1.2s ease',
          keyframes([
            style({left: '40%', offset: 1}),
          ])
        )
    ]),
  ]),


  trigger('login-form', [
    state('default', style({
      display: 'flex',
    })),
    transition('default => move', [
      animate('1.2s ease',
        keyframes([
          style({display: 'flex', offset: .39}),
          style({display: 'flex', offset: .4}),
        ]))
    ]),
    state('move', style({
      display: 'none'
    })),
    transition('move => default', [
      animate('1.2s ease',
        keyframes([
          style({display: 'none', offset: .39}),
          style({display: 'none', offset: .4}),
        ]))
    ])
  ]),

感谢您的关注和帮助!

0 个答案:

没有答案