角度动画具有跳跃不同高度内容的效果

Question

想要创建一个角度动画，该动画将在路由更改时调用。在包含插座的 div 上调用动画。动画本身效果很好，只有在移动设备上有问题，由于组件高度不同，改变时会有跳跃效果，我不知道如何解决这个问题，如果有人有类似的问题我会很高兴知道解决方案。以下是我正在使用的代码

<div class="container">
<header class="header">
</header>

<div class="outlet" [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet">
    </router-outlet>
</div>

<footer class="footer">
</footer>

CSS

    .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .header {
        width: 100%;
    }

    .outlet {
        flex: 1;
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .footer {
        width: 100%;
        margin-left: 52px;
    }

}

@media (max-width: 800px) {
    .container {
        
        .footer {
            margin-left: 6px;
        }
    }
}

ts

 export class AuthOutletComponent implements OnInit {

  constructor(private loaderScreenService: LoaderScreenService) { }

  ngOnInit(): void {
    this.loaderScreenService.hide();
  }

  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData;
  }

}

动画

    export const authRouteAnimations =
  trigger('routeAnimations', [
    transition('* <=> *', authFadeInFadeOut()),
  ]);

function authFadeInFadeOut() {
  const optional = { optional: true };

  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        pop: 0,
        left:0,
        width: '100%',
        height: 'auto',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      })
    ], optional),
    query(':enter', [
      style({opacity: 0 })
    ], optional),
    query(':leave', [
      style({ left: 0, opacity: 1 })
    ], optional),
    group([
      query(':leave', [
        animate('800ms ease', style({ left: '+30%', opacity: 0 }))
      ], optional),
      query(':enter', [
        animate('800ms 550ms ease', style({ opacity: 1 }))
      ], optional)
    ]),
  ];
}

Answer 1

我刚刚遇到了同样的问题，问题是访问新页面时仍然是上一页的旧内容。

所以我通过将动画的离开持续时间设置为0来修复它。这样，在新页面加载之前旧内容已经消失了。

这是我的页面动画：

export const routeAnimationsState = trigger('routeAnimationTrigger', [
transition(':enter', [
    style({ 
        opacity: 0 
    }), 
    animate(1000),
]),
transition(':leave', [
    animate(0, style({ 
        opacity: 0 
    })),
]),]);