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 : stackoverflow.com/a/39463660/2025271 — ktsangop
– ktsangop, Commented Mar 27, 2017 at 10:47

Zuriel · Accepted Answer · 2017-11-05 13:31:22Z

1

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

answered Nov 5, 2017 at 13:31

Zuriel

1,8581 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 - controlling animation keyframes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related