2

我有一个动画，它在 stackblizt ( https://stackblitz.com/edit/burger?file=app%2Fburger%2Fburger.component.ts ) 以及在本地运行良好ng serve --aot，但它似乎直接跳到生产构建的最终状态 ( 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')
  ]
4

3 回答 3

3

所以问题当然不在于我使用函数返回触发器，也不在于函数传递参数。问题在于对states 使用布尔值，如果我使用字符串代替（即open，closed而不是trueand false）。它会正常工作。让我再重复一次，这只发生在生产构建中，所以有些东西可能被删除/剥离，而它不应该。

我已经在这里报告了这个问题，一旦问题得到解决，我会更新答案。

于 2017-11-13T08:08:29.790 回答
0

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

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}),

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

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

于 2017-11-12T16:33:07.567 回答
0

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

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

（我在开发过程中禁用了 IVY，因为我在那里遇到了其他问题......：D）

于 2020-01-05T14:38:53.467 回答