2

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')
  ]
fxck
  • 4,898
  • 8
  • 56
  • 94
  • I copied your code into my application and it does not export the animation, I don't know if what you are doing is valid, but its sure not the way I do animations... why can't you just use param's in your animation and make a reusaable animation and control it that way? – Zuriel Nov 12 '17 at 17:26

3 Answers3

3

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.

fxck
  • 4,898
  • 8
  • 56
  • 94
0

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.

Zuriel
  • 1,848
  • 1
  • 19
  • 32
  • I wasn't really aware of `animation()`, but as far as I can tell, you can *only* use it for animation, not states, not transitions, it's less reusable than a function that returns everything. Ideal would probably be a combination. The real question is, why what I'm doing should not work? It's statically analyzable, compiles fine, works in dev mode (even with the `--aot`) flag.. – fxck Nov 12 '17 at 18:18
  • correct you define states, then you can use the animations in the states. i don't know other than your function is not working for me in AOT but i have tons of animations and other things that work in AOT, and I have some very complicated animations like router, transitions, BehaviorSubjects drawers that open and close, etc. you can also use animationBuilder if you are looking for the most complex possible use cases to perform animations. https://angular.io/api/animations/AnimationBuilder – Zuriel Nov 12 '17 at 18:27
  • also check this out to see animationBuilder working https://github.com/matsko/AnimationMovieWebsite – Zuriel Nov 12 '17 at 18:32
  • `AnimationBuilder` has the same "problem", my animation itself is not complex, it's those final states and transitions I'm looking to reuse.. Does it not even compile for you with aot, or this http://burger.fxck.cz/ happens (it jumps straight to the final state without actually animating)? – fxck Nov 12 '17 at 18:35
0

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)

pesho hristov
  • 1,946
  • 1
  • 25
  • 43