Angular 2 animated transition based on dynamic value instead of time

Question

Although I understand that Angular 2 animate is mainly used to animate the transition between states at a fixed time, this is not always what is most convenient.

In my case, I have a sliding element that I want to animate based on how far I moved it from the default position. That is, I want to dynamically provide a handler, for example, a floating point number between 0 and 1, representing how far in the animation I should be. Can handle angular 2 ? Can I somehow bypass the default value animate(time) propertyand directly call the underlying function that modifies css?

Answer 1

I do not 100% understand your problem, but I do not think that what you are asking is possible with Angular animation. Angular animations are built on top of the web animation API, which in itself is simply a simplified way to interact with CSS animations. CSS animations are defined by keyframes + durations (see https://css-tricks.com/almanac/properties/a/animation/ ).

Theoretically, you can create a complex set of key frames that you “stepped” based on the position of your slide-capable element, but this will be a hack, not what you ask for.

, , Javascript , . , , , Tether.