angular - 在 Angular 中的同一组件之间制作动画

Question

我有一个问题组件。

在 app-routing.module.ts

{ path: 'chapter1/:question', component: QuestionComponent, data: {animation: 'Question', question: true}, canActivate: [AuthGuard]},

每章有3道题，共4章。我有一个为每个问题创建 url 的 api。

第 1 章/问题 1、第 1 章/问题 2 等。

我需要这些问题在彼此之间进行动画处理。但这只是一个艰难的削减。数据换出，但动画不会触发。

在我添加的转换文件中：

transition('Question <=> Question', [
    group([ 
        query(':leave', [
            style({ transform: 'translateX(0%)', zIndex: 20 }),
        ]),
        query(':leave .character', [
            style({ transform: 'translateY(0%)', opacity: 1 }),
            animate('600ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: 'translateY(20%)', opacity: 0 }))
        ]),
        query(':leave .inner-section', [
            style({ transform: 'translateY(0%)', opacity: 1 }),
            animate('600ms 300ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: 'translateY(20%)', opacity: 0 }))
        ]),
        query(':leave .wave-front', [
            style({ transform: "translateX(0%)", opacity: 1 }),
            animate('600ms 600ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: "translateX(100%)" }))
        ]),
        query(':leave .wave-back', [
            style({ transform: "translateX(0%)", opacity: 1 }),
            animate('600ms 850ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: "translateX(100%)" }))
        ]),
    ]),
    group([
        query(':leave', [
            style({ transform: 'translateX(0%)', zIndex: 20 }),
            animate('0ms linear', style({ zIndex: -1 }))
        ]),
    ])
]),

但它没有被触发。我尝试将动画添加到 Question 组件本身。

trigger('fadeOutIn', [
  transition('void => *', [
    style({ opacity: 0, transform: 'translateY(50px)' }),
    animate('500ms 0.5s ease', style({ opacity: 1, transform: 'translateY(0px)' })),
  ]),
  transition('* => void', [
    animate('300ms ease', style({ opacity: 0, transform: 'translateY(50px)' }))
  ])
])

然后在 question.component.html

<div class="inner-section" @fadeOutIn></div>

但这在问题页面之间路由时也不会触发。

我也尝试过添加路由重用策略，但我唯一一次让它动画化但它没有路由它基本上只是路由到同一页面，例如第 1 章/问题 1 -> 第 1 章/问题 1

任何帮助都会很棒，谢谢！

标签： angularangular-animations