CODEWITHSUNDEEP
angularangular-animationsweb-animations
fxck
fxck

Reputation: 4908

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

I have an animation, which works fine on 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/

Can you stop something in the code that might be causing it?

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)'
      }))
    ])
  ]);
}

used like this in the component decorator 

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

Upvotes: 2

Views: 2327

Answers (3)

pesho hristov
pesho hristov

Reputation: 2060

In my case the issue didn't resolve at all, no matter what I tried.

At the end I enabled IVY with this tutorial: https://angular.io/guide/ivy - and then the animations started working in the generated app :D

(I disabled IVY while developing cause I was having other problems there ... :D)

Upvotes: 0

fxck
fxck

Reputation: 4908

So the problem is certainly not with me using a function to return the trigger, nor with params being passed down by the function. The problem is with using booleans for states, if I use string instead (ie. open, closed instead of true and false). It will work fine. And let me repeat one more time, this only happens in production build, so something is perhaps being removed / stripped while it shouldn't.

I have reported the issue here and will update the answer once it gets resolved.

Upvotes: 3

Zuriel
Zuriel

Reputation: 1848

first you define your animation you want to reuse, and set some default parameters (that can be changed later, or used if you supply nothing or don't override them) 

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)'
   }}
);

then to use it

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

This is a generalization of how to use Params in your animation, this will not fix your code because its just a example, but you need to refactor your code so that you are using animations with params rather than exporting a class with a exported transition with your values forced into them with `${

then you will use the useAnimation() to call a saved animation passing your params in.

Upvotes: 0

Related Questions