Question

我添加了动画效果以在页面之间导航，但是它只能工作一次。在启动时，它不再起作用。

以下是动画逻辑：

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

  export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', slideTo('left') ),
    transition('* => isRight', slideTo('right') ),
    transition('isRight => *', slideTo('left') ),
    transition('isLeft => *', slideTo('right') )
  ]);

function slideTo(direction) {
  const optional = { optional: true };
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({ [direction]: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ [direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('600ms ease', style({ [direction]: '0%'}))
      ])
    ]),
    // Normalize the page style... Might not be necessary

    // Required only if you have child animations on the page
    // query(':leave', animateChild()),
    // query(':enter', animateChild()),
  ];
}

这是导航栏HTML部分

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

这是导航栏TS部分

  prepareRoute(outlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']
  }

这是路由器配置

export const routes: Routes = [
  { path: "",        component: UserloginComponent, data: { animation: 'isRight' } },
  { path: "dashboard", component: NavbarComponent, data: { animation: 'isRight' }, children: [

  /* MAIN ROUTES */
  { path: "forms",    component: DynamicFormComponent, canActivate: [], data: { animation: 'isRight' } }, 
  { path: "table",    component: DynamicTableComponent, canActivate: [], data: { animation: 'isRight' }  }, 

  /* Auth and conf routes */
  { path: "",             component: IndexComponent },
  { path: "appinfo",      component: AppinfoComponent, canActivate: [] },
  { path: "register",     component: UserregisterComponent },
  { path: "recover",      component: PasswordrecoverComponent },

  { path: "user",         component: UserprofileComponent, canActivate: [] },
  { path: "**",           component: NotfoundComponent },
]}]

仅此而已。这不仅发生在此“ curret”滑块上。我尝试了不同的功能，但是它具有相同的行为-它在启动时显示第一个动画，然后什么也不显示。编辑：控制台中未显示任何错误。

应用使用“ @ angular / animations”版本：“ 7.2.15”

路由器的Angular 7动画只能运行一次

0 个答案: