Question

我有一个全屏导航，可以接管整个屏幕。输入覆盖层（父项）后，我想显示的菜单（子项）的内容。我已经开始工作了。但是，请假过渡是个问题。

在父母动画之前，我无法让孩子褪色甚至完全消失。相反，尽管我无法确认子动画是否正在运行，但父动画会先设置动画。

退出动画的开始将父对象的宽度和高度设置为视图的300％。这对于产品团队要求的效果是必要的。

HTML：

<div *ngIf="menuOpen" @fullscreenNav class="fullscreen-nav" >
    <div class="menu-content" @showHideOnLeave >
    </div>
</div>

组件TS（仅限动画）：

animations: [
trigger('animateChildren', [
  transition(':enter, :leave', [
      query('@showHideOnLeave', animateChild())
  ])
]),
trigger('fullscreenNav', [
    transition(':enter', [
      style({
        height: '20vh',
        width: '50vw',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        top: '-10vh',
        right: '-10vw'
      }),
      animate('400ms ease-in', style({
        height: '300%',
        width: '300%',
        borderRadius: '0',
        top: '0',
        right: '0'
      })),
    ]),
    transition(':leave', [
      style({
        height: '100%',
        width: '100%',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        overflow: 'hidden',
        top: '0vh',
        right: '0vw'
      }),
      animate('500ms 100ms',  style({
        offset: 1,
        height: '15vh',
        width: '20vw',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        top: '-10vh',
        right: '-10vw'
      })),
    ]),
   ]),

Answer 1

所以我想出了这个。诀窍是在transition（）内部使用sequence（）内部的group（）函数。这是我的解决方案（第一个触发函数删除了：leave过渡选择器，并在fullscreenNav的：leave过渡中，我添加了group和sequence函数来启动子动画）：

animations: [
trigger('animateChildren', [
  transition(':enter', [
      query('@showHideOnLeave', animateChild())
  ])
]),
trigger('fullscreenNav', [
  transition(':enter', [
    style({
      height: '20vh',
      width: '50vw',
      borderRadius: '100%',
      borderTopRightRadius: '0',
      top: '-10vh',
      right: '-10vw'
    }),
    animate('400ms ease-in', style({
      height: '300%',
      width: '300%',
      borderRadius: '0',
      top: '0',
      right: '0'
    })),
  ]),
  transition(':leave', [
    sequence([
      group([
        query('@showHideOnLeave', animateChild({ duration: '200ms' })),
      ]),
        style({
          height: '300%',
          width: '300%',
          borderRadius: '100%',
          borderTopRightRadius: '0',
          overflow: 'hidden',
          top: '0vh',
          right: '0vw'
        }),
          animate('300ms 100ms',  style({
            offset: 1,
            height: '15vh',
            width: '20vw',
            borderRadius: '100%',
            borderTopRightRadius: '0',
            top: '-10vh',
            right: '-10vw'
          })),
    ])
  ]),
]),
trigger('showHideOnLeave', [
  transition('void => *', [
    style({
      opacity: 0
    }),
    animate('200ms 400ms', style({
      opacity: 1
    }))
  ]),
  transition('* => void', [
    style({
      opacity: 1
    }),
    animate('100ms', style({
      opacity: 0
    }))
  ])
]),

]

让父级动画等待子动画在Angular中完成

1 个答案: