Angular 角度路线动画随图像起伏

我使用实现了角度路线动画，它们工作得很好，只是背景图像非常起伏，不能立即加载。我不认为这是一个预加载的问题，就像你在两个标签之间来回移动一样，当图像应该被缓存时，它仍然是不稳定的。但我可能错了，我愿意接受建议

以下是实时站点的链接： 如果你点击导航栏，你会看到我在说什么

代码如下：

动画页面：

import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';

export const routeTransitionAnimations = trigger('trigger', [
    transition('Zero => One, One => Two, Two => Three, Three => Four, Four => Five, Zero => Two, Zero => Three, Zero => Four, Zero => Five, One => Three, One => Four, One => Five, Two => Four, Two => Five, Three => Five', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                right: 0,
                // width: '100%'
            })
        ]),
        query(':enter', [style({ right: '-100%', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
            query(':leave', [animate('.5s ease-out', style({ right: '100%', opacity: 0 }))]),
            query(':enter', [animate('.5s ease-out', style({ right: '0%', opacity: 1 }))])
           ]),
        query(':enter', animateChild())
    ]),
    transition('Five => Four, Four => Three, Three => Two, Two => One, One => Zero, Five => Three, Five => Two, Five => One, Five => Zero, Four => Two, Four => One, Four => Zero, Three => One, Three => Zero, Two => Zero', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
          style({
            position: 'absolute',
            top: 0,
            left: 0,
            // width: '100%'
          })
        ]),
        query(':enter', [style({ left: '-100%', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
          query(':leave', [animate('.5s ease-out', style({ left: '100%', opacity: 0 }))]),
          query(':enter', [animate('.5s ease-out', style({ left: '0%', opacity: 1 }))])
         ]),
         query(':enter', animateChild())
       ])
]);

如果你还需要什么，请告诉我

---

谢谢

感谢@Chris-W！我用tinyjpg.com缩小了图片，然后把左边的“100%”改成了transform:translateX，一切都快多了

以下是修改后的代码：

import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';

export const routeTransitionAnimations = trigger('trigger', [
    transition('Zero => One, One => Two, Two => Three, Three => Four, Four => Five, Zero => Two, Zero => Three, Zero => Four, Zero => Five, One => Three, One => Four, One => Five, Two => Four, Two => Five, Three => Five', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                right: 0,
                // width: '100%'
            })
        ]),
        query(':enter', [style({ transform: 'translateX(1000px)', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
            query(':leave', [animate('.5s ease-out', style({ transform: 'translateX(-1000px)', opacity: 0 }))]),
            query(':enter', [animate('.5s ease-out', style({ transform: 'translateX(0px)', opacity: 1 }))])
           ]),
        query(':enter', animateChild())
    ]),
    transition('Five => Four, Four => Three, Three => Two, Two => One, One => Zero, Five => Three, Five => Two, Five => One, Five => Zero, Four => Two, Four => One, Four => Zero, Three => One, Three => Zero, Two => Zero', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
          style({
            position: 'absolute',
            top: 0,
            left: 0,
            // width: '100%'
          })
        ]),
        query(':enter', [style({ transform: 'translateX(-1000px)', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
          query(':leave', [animate('.5s ease-out', style({ transform: 'translateX(1000px)', opacity: 0 }))]),
          query(':enter', [animate('.5s ease-out', style({ transform: 'translateX(0px)', opacity: 1 }))])
         ]),
         query(':enter', animateChild())
       ])
]);

---

如果使用

transform

到

translateX

而不是从属性中翻转

位置

，则无需重新测量和GPU特惠，即可获得平滑效果。如果你通过一些方式压缩了那些大图像，比如，留下评论，没有时间去做stackblitz之类的事情，那么你的加载时间可能会减少1/3+。干杯：）谢谢你的评论，我试着缩小了IMG，在网络标签上似乎更快了，但在页面切换上还是有问题。转换：translateX成功了！！thanksAh cool看起来你就在那里。如果你在“溢出-x:hidden；”中加上额外的积分在相同的位置，以消除水平底部滚动条闪烁时出现的跳跃效果。哦，1000px也可以是%。