Angular 4.3新路由器动画'；行不通

我对新的Angular 4.3动画有一个问题。我认为我定义的一切都符合：但在补丁更改过程中，我现在没有任何动画。下面我将显示我的动画文件：

我的动画：

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

export const routerTransition = trigger('routerTransition', [
  transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width:'100%' })
      , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      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 }),
    ])
  ])
]);

编辑：

我找不到解决方案，所以在每个子控制器中返回到旧版本的动画：

 animations: [slideInOutAnimation],
  host: { '[@slideInOutAnimation]': '' }

---

如果有人找到了解决方案，请发布信息，说明如何使其更容易，并仅在一个位置而不是每个控制器中创建动画。

我在AOT编译中也遇到了相同的错误。我的解决方案：

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

// this solves them problem
export function query(s, a) {
    return q(s, a, {optional: true});
}

export const routerTransition = trigger('routerTransition', [
  transition('* => *', [
    query(':enter, :leave', style({position: 'fixed', width: '100%'})),
    query(':enter', style({transform: 'translateX(100%)'})),
    sequence([
      query(':leave', animateChild()),
      group([
        query(':leave', [
          style({transform: 'translateX(0%)'}),
          animate('400ms cubic-bezier(.75,-0.48,.26,1.52)',
            style({transform: 'translateX(-100%)'}))
        ]),
        query(':enter', [
          style({transform: 'translateX(100%)'}),
          animate('400ms cubic-bezier(.75,-0.48,.26,1.52)',
            style({transform: 'translateX(0%)'}))
        ])
      ]),
      query(':enter', animateChild())
    ])
  ])
]);

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

// this solves them problem
export function query(s, a) {
    return q(s, a, {optional: true});
}

export const routerTransition = trigger('routerTransition', [
  transition('* => *', [
    query(':enter, :leave', style({position: 'fixed', width: '100%'})),
    query(':enter', style({transform: 'translateX(100%)'})),
    sequence([
      query(':leave', animateChild()),
      group([
        query(':leave', [
          style({transform: 'translateX(0%)'}),
          animate('400ms cubic-bezier(.75,-0.48,.26,1.52)',
            style({transform: 'translateX(-100%)'}))
        ]),
        query(':enter', [
          style({transform: 'translateX(100%)'}),
          animate('400ms cubic-bezier(.75,-0.48,.26,1.52)',
            style({transform: 'translateX(0%)'}))
        ])
      ]),
      query(':enter', animateChild())
    ])
  ])
]);