angular - ng build --prod 非导出函数

Question

我是 Angular 的初学者。 编译器说我在负责组件之间动画的文件中存在方法错误。 我不太明白问题出在哪里。

在寻找问题的解决方案时，我发现有必要为动画的每个状态添加一个“可选”。 我添加了，但这没有帮助......

动画路线

export const animateRoutes=
  trigger('routeAnimations', [
    transition('webDesign => graphicDesign', slideTo('left') ),
    transition('graphicDesign => webDesign', slideTo('right') ),

    transition('webDesign => webProject', slideTo('right') ),
    transition('webProject => webDesign', slideTo('left') ),

    transition('graphicDesign => graphicProject', slideTo('right') ),
    transition('graphicProject => graphicDesign', slideTo('left') ),

    transition('webProject => graphicDesign', slideTo('left') ),
    transition('graphicProject => webDesign', slideTo('left') ),

    transition('* => *', fadeIn() )
  ]);

幻灯片动画

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%'})
    ],optional),
    group([
      query(':leave', [
        animate('800ms ease-in-out', style({ [direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('800ms ease-in-out', style({ [direction]: '0%'}))
      ],optional)
    ]),
  ];
}

淡入动画

function fadeIn() {
    const optional = { optional: true };
    return [
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], optional),
      query(':enter', [
        style({ opacity: 0 })
      ],optional),
      group([
        query(':leave', [
          animate('600ms linear', style({ opacity: 0 }))
        ], optional),
        query(':enter', [
          animate('600ms linear', style({ opacity: 1 }))
        ],optional)
      ]),
    ];
  }

app.component.ts: 路线动画: 错误:

Answer 1

我找到的解决方案不是在函数中设置动画，而是将动画设置为变量。 我在这里找到了这个解决方案: https://pastebin.com/H1CKMvw5

const optional = { optional: true };
let toTheRight = [
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: '0',
      right: 0,
      width: '100%',
    })
  ], optional),
  query(':enter', [
    style({ right: '-100%',  })
  ]),
  group([
    query(':leave', [
      animate('300ms ease', style({ right: '100%', }))
    ], optional),
    query(':enter', [
      animate('300ms ease', style({ right: '0%'}))
    ])
  ]),
];
let toTheLeft = [
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: '0',
      left: 0,
      width: '100%',
    })
  ], optional),
  query(':enter', [
    style({ right: '-100%',  })
  ]),
  group([
    query(':leave', [
      animate('300ms ease', style({ left: '100%', }))
    ], optional),
    query(':enter', [
      animate('300ms ease', style({ left: '0%'}))
    ])
  ]),
]


export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', toTheLeft),
    transition('* => isRight', toTheRight),
    transition('isRight => *', toTheLeft),
    transition('isLeft => *', toTheRight),
  ]);

之后一切正常。