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

我发现的解决方案不是将动画设置为函数，而是将其设置为变量。我在这里找到了这个解决方案： this

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),
  ]);

之后一切正常。

ng build --prod非导出功能

1 个答案: