jiayihu / ng-animate

🌙 A collection of cool, reusable and flexible animations for Angular 14+

Home Page:https://jiayihu.github.io/ng-animate/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Passing the delay parameter as milliseconds does not work - Angular 5 project

abegic121 opened this issue · comments

Reading the documentation, it should work but it does not. The work around I found best suited was to pass in a string of my own. It could be a future enhancement

By milliseconds, I mean, passing .6, 0.6 etc. does not work, only integer values work. So I changed the entire library locally to suit my needs.

This is a really cool little library and it seems like a great way to quickly include some animation. I too have the problem where I need the animation to complete in under a second. Is there a recommended approach?

This setting works fine:
params: { timing: 1, delay: 0 }

The following setting creates a flash of unanimated DOM (the component renders normally, then the animation starts:
params: { timing: 0.5, delay: 0 }

I see that the angular animation params can expect a string, so I'm assuming the library is forcing this to be in seconds.

Ah, so the animation templates expect the value as seconds, so passing following works fine (use a string instead of a number):

params: { timing: '0.1', delay: 0 }

I have actually found that delay needs to be outside of the params object:

transition(':enter', useAnimation(flipInX, {
                params: { timing: 0.4 },
                delay: 0.4
}))