animations

[vytautas-pranskunas-]

Hi, i wanted to control animation duration for example to shorten input field highlight and you said it is a bit complex and i should just use { provide: TUI_ANIMATIONS_SPEED, useValue: 0 },. This worked for me until now. Now i want to use bottom sheet and modals. There animation should play like when bottom sheet is expanding from the bottom.

any ideas how to atchieve that?
I mean i can pass duration to appeareance like this:
but i guess not all components has that..
@include transition(border, var(--duration));
i think it would be great to have some enum setting noAnimation, shortAnimation, longAnimation where components like textbox would use short or no animation for border highlight because it looks weired when border highlights for 300ms, but for bottom sheet 300ms it is good

[waterplea]

CSS transitions are controlled by CSS variable --tui-duration. By default it does come from TUI_ANIMATION_SPEED so that CSS and Angular animations have the same speed. If you want to keep one speed for Angular animations, such as dropdowns or modals, but different one for CSS transitions such as hover effects or focus borders — you can override CSS variable like that:

<tui-root [style.--tui-duration.ms]="100">...</tui-root>

It would take precedence over built-in binding.

[vytautas-pranskunas-]

But

<tui-root [style.--tui-duration.ms]="100">...

Would override global animation speed not for each component seperatly. Or?

[waterplea]

Yes. If you want it separately — you can always override it locally because both DI (TUI_ANIMATION_SPEED) and CSS (--tui-duration) are hierarchical.

[vytautas-pranskunas-]

I do not want localy, also do not want to override it on each component. I would like that all textfields has one animation speed, button another, modals another.

[waterplea]

Then in global styles you can write something like:

button {
  --tui-duration: 100ms;
}

tui-textfield {
  --tui-duration: 200ms;
}

For Angular Animations that is not possible.