Question

我正在尝试将动画添加到我的整个网站。我面临的问题是，在同一个组件内，但有一条新路线，我的动画无法正常工作。我已将动画设置为在路线更改时激活。

这是我的路由设置：

const routes: Routes = [
      {path: '', redirectTo: '/home', pathMatch: 'full'},
      {path: 'not-found', component: PageNotFoundComponent},
      {path: 'home', component: HomeComponent, data: { state: 'home'}},
      {path: 'stage', component: StageComponent, data: { state: 'stage'}},
      {path: 'documenten', component: DocumentenComponent, data: { state: 'documenten'}},
      {path: 'competenties/:uid', component: CompetentieComponent, data: { state: 'competenties/:uid'}}
];

这是我的动画

    export const routerTransition = trigger('routerTransition', [
    transition('* <=> *', [
        query(':enter, :leave', style({position: 'fixed', width: '100%'})
            , {optional: true}),
        group([
            query(':enter', [
                style({transform: 'translateX(100%)'}),
                animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
            ], {optional: true}),
            query(':leave', [
                style({transform: 'translateX(0%)'}),
                animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}
            ], {optional: true}),
        ])
    ]),
    ]);

这是用于调用动画的HTML

<div [@routerTransition]="getState(o)">
     <router-outlet #o="outlet"></router-outlet>
</div>

这是模板的TypeScript：

import {routerTransition} from './animations';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [routerTransition]
})

export class AppComponent {
    public getState(outlet) {
        return outlet.activatedRouteData.state;
    }
}

我尝试使用：increment作为过渡，但似乎不起作用。我对角动画完全陌生，因此可以提出任何建议/帮助！

谢谢！

Answer 1

问题在于在这种情况下，组件已被重用并对其进行了角度处理，因此没有触发过渡动画。

此帖子提供了一种解决方案https://medium.com/frontend-coach/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b

同一组件内的角度动画

1 个答案: