Как сделать плавную анимацию dots?

Question

[vlados096zver]

сейчас видно , что активный dot прыгает
анимируется ширина
https://stackblitz.com/edit/angular-hello-world-br...

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/YPydwKy

Comments

[vlados096zver]

Сергей delphinpro с точки зрения “чистой производительности” текуший результат вызывает reflow

[Сергей delphinpro]

vlados096zver, ну если уж на то пошло, то у вас reflow затронет только точки, так как они абсолютно спозиционированы, а не весь DOM

Answer 2

[alexalexes]

Добавите больше ключевых кадров css в shrinkWidth, чтобы ширина изменялась не 30 -> 10, а, например, 10 -> 30 -> 10.

Comments

[vlados096zver]

Ankhena анимирование width так или иначе плохо повлияет

[vlados096zver]

Ankhena, а как тут правильно сделать?

[vlados096zver]

Ankhena, это понятно. А что?

[Алексей Уколов]

vlados096zver, сформулируйте точно и детально, в чём вы видите проблему. Если вам не нравится, например, что при анимации центральной точки двигаются крайние, то это одна проблема с одним решением. Если же, скажем, вам не нравится как именно анимируется сжатие, а всё остальное устраивает - другая и решение у неё другое.

[vlados096zver]

Алексей Уколов, с точки зрения “чистой производительности” текуший результат вызывает reflow

[Алексей Уколов]

У вас с «чистой производительностью» проблема?

[vlados096zver]

Алексей Уколов, вопрос в том что именно использовать для этого

[Алексей Уколов]

Для чего «этого»? Ещё раз — чётко сформулируйте проблему, которую пытаетесь решить.

[vlados096zver]

Алексей Уколов, анимация width вызывает reflow