CODEWITHSUNDEEP
javascriptcssanimationangular
J.Bac
J.Bac

Reputation: 43

Angular 2 animating transition based on dynamic value instead of time

While I understand that Angular 2's animate is primarily used to animate the transition between states in a fixed time, this is not always what is most convenient.

In my case, I have a slide-able element, that I wish to animate based on how far I have moved it from its default position. That is, I want to provide the handler dynamically with, for example a float number between 0 and 1 representing how far along the animation I should be. Can the angular 2 framework handle this? Can I perhaps, somehow, bypass the default animate(time) property, and directly call the underlying function that changes the css?

Upvotes: 4

Views: 514

Answers (1)

John
John

Reputation: 10099

I'm not 100% clear on your problem, but I don't think what you're asking for is possible with Angular animations. Angular's animations are built on top of the Web Animation API, which itself is just a streamlined means of interacting with CSS Animations. CSS animations are defined with keyframes + durations (see https://css-tricks.com/almanac/properties/a/animation/).

Theoretically, you could create a complex set of keyframes that you "stepped through" based on the position of your slide-able element, but it would be a hack and not really what you're asking for.

To accomplish your goal, I think you'll need to use custom Javascript or find an outside library to help you. You're a little vague on the project details, but, as an example, a library like Tether might help you.

Upvotes: 1

Related Questions