Angular 2 - controlling animation keyframes

Question

I'm trying to find a way to control CSS3/ angular 2 animations.

For example, look at the following code from the offical angular 2 animation docs with some changes:

animations: [
  trigger('flyInOut', [
    state('in', style({position: 'absolute', left: '15%',bottom:'15%'})),
    transition('void => *', [
      animate(300, keyframes([
        style({opacity: 0, left: '30%', offset: 0}),
        style({opacity: 1, left: '50%',  offset: 0.3}),
        style({opacity: 1, left:'80%',     offset: 1.0})
      ]))
    ])
  ])
]

My question is that if there is any way to control the css values with angular 2 variables. An illustration would be:

<animation leftPrec="15%" bottomPrec="15%" firstStep="30%" secondStep="60%" thirdStep="80%"></animation>

and in the animation component:

animations: [
      trigger('flyInOut', [
        state('in', style({position: 'absolute', left: leftPrec,bottom:bottomPrec})),
        transition('void => *', [
          animate(300, keyframes([
            style({opacity: 0, left: firstStep, offset: 0}),
            style({opacity: 1, left: secondStep,  offset: 0.3}),
            style({opacity: 1, left: thirdStep,     offset: 1.0})
          ]))
        ])
      ])
    ]

This demo obviously not working and written for illustration for what i'm trying to achieve.

I would love to hear if you have any way or suggestion about how to achieve something similar in order to control the animation keyframes properties.

It seems that this is not possible with the current Angular animations api. But this answer might provide you with a useful workaround : http://stackoverflow.com/a/39463660/2025271 — ktsangop, Mar 27 '17 at 10:47

score 1 · Answer 1 · answered Nov 05 '17 at 13:31

you can now perform a re-usable animation using useAnimation();

export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1.000)';

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

then USE the animation somewhere else and you can change the default params.

query('button', stagger('300ms', [
          useAnimation(zaFade, { params:
              {
                time: `1000ms ${easeInOutCubic}`,
                from: '0',
                to: '1',
                transform: 'translateY(0px)'}
            }
          )
        ]), { optional: true }),

Angular 2 - controlling animation keyframes

1 Answers1