angular 动画在生产构建中不起作用（跳到最终状态而不实际动画）

Question

我有一个动画，在 stackblizt 上运行良好（https://stackblitz.com/edit/burger?file=app%2Fburger%2Fburger.component.ts) as well as locally with ng serve --aot, but it seems to be skipping straight to the final state on production build (ng build --prod) http://burger.fxck.cz/

你能阻止代码中可能导致它的东西吗？

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

export const EASING = 'cubic-bezier(0.5, 0.5, 0.76, 0.76)';

export function burgerLineAnimation(name: string, translateY = '15px', rotateFinal = '45deg', rotateOver = '65deg') {
  return trigger(name, [
    // opened state, in center, rotated, expanded
    state('true', style({
      transform: `translateY(${translateY}) translateX(17.5px) rotate(${rotateFinal})`,
      width: '40px'
    })),

    transition('false => true', [
      // move to center
      animate(`100ms ${EASING}`, style({
        transform: `translateY(${translateY})`
      })),
      // expand from dot to line
      animate(`100ms ${EASING}`, style({
        width: '40px',
        transform: `translateY(${translateY}) translateX(17.5px)`
      })),
      // rotate over
      animate(`80ms ${EASING}`, style({
        transform: `translateY(${translateY}) translateX(17.5px) rotate(${rotateOver})`
      })),
      // rotate final
      animate(`150ms ${EASING}`, style({
        transform: `translateY(${translateY}) translateX(17.5px) rotate(${rotateFinal})`
      }))
    ]),

    transition('true => false', [
      // level and shrink
      animate(`100ms ${EASING}`, style({
        transform: `translateY(${translateY}) translateX(0) rotate(0deg)`,
        width: '5px'
      })),
      // move to proper position
      animate(`100ms ${EASING}`, style({
        transform: 'translateY(0)'
      }))
    ])
  ]);
}

在组件装饰器中这样使用

  animations: [
    burgerLineAnimation('firstLine'),
    burgerLineAnimation('thirdLine', '-15px', '-45deg', '-60deg')
  ]

Answer 1

首先定义要重用的动画，并设置一些默认参数（稍后可以更改，或者在您不提供任何内容或不覆盖它们时使用）

export const easeInQuart = 'cubic-bezier(0.895, 0.030, 0.685, 0.220)';

export const zaFade = animation([
     style({opacity: ' {{ from }} ', transformOrigin: '50% 0%'}),
     animate('{{ time }}', style({opacity: ' {{ to }} ', transform: ' {{ transform  }}'})
     )], {params: {
              time: `1000ms ${easeInQuart}`,
              from: 1,
                to: 0,
         transform: 'translateX(0)'
   }}
);

然后使用它

        query('mySelector',
        useAnimation(zaFade, {
            params:
              {
                time: `500ms ${easeInOutCubic}`,
                from: '0',
                to: '.5',
                transform: 'translateX(300px)'
              }
          }
        ), {optional: true}),

这是对如何在动画中使用参数的概括，这不会修复您的代码，因为它只是一个示例，但您需要重构代码，以便使用带参数的动画而不是导出 class 带有一个导出的转换，你的值用 `${

强制进入它们

然后您将使用 useAnimation() 调用保存的动画并传入您的参数。

Answer 2

所以问题肯定不在于我使用函数 return 触发器，也不在于函数传递的参数。如果我改用字符串（即 open、closed 而不是 true 和 false），则问题在于对 state 使用布尔值。它会工作正常。让我再重复一次，这只发生在生产构建中，所以某些东西可能被删除/剥离，而它不应该被删除。

我已经报告了这个问题 here 并且会在问题得到解决后更新答案。

Answer 3

就我而言，无论我怎样尝试，问题都没有解决。

最后，我通过本教程启用了 IVY：https://angular.io/guide/ivy - 然后动画开始在生成的应用程序中运行：D

（我在开发时禁用了 IVY，因为我在那里遇到了其他问题...:D）

angular 动画在生产构建中不起作用（跳到最终状态而不实际动画）

angular animation not working on production build (skips to final state without actually animating)

web-animations

angular

angular-animations