Плавная анимация?

Question

[Aleksandr]

Есть такой код: codepen.io/anon/pen/KWYQYP
Подскажите плиз, как сделать плавную смену?

Answer 1

[Vlad Feninets]

"position: absolute" при ре-рендере триггерит одновременно 3 слоя (лейаут, paint, composite), что для браузера очень трудозатратно (https://csstriggers.com/)

в таким случаях для позиционирования лучше юзать transform: translate, он триггерит только "paint".
+ можно навесить will-change, чтобы подготовить браузер к перерисовке.
+ можно заставить браузер производить рендеринг на GPU - transform: translateZ(0);

Comments

[alex]

у автора вообще top, right анимируется, а не position. position: absolute тут только в плюс, так как благодаря этому элемент выдирается из потока и во время анимации не оказывает воздействия на остальные элементы

[Aleksandr]

Alex: Не совсем так. У меня по факту ничего не анимируется.
Есть 14 элементов у каждого своя позиция. Показывается только 7 из 14.
то есть меняются классы class1 & class2

[alex]

Александр Котов: показываются все 14 элементов, просто 7 из них не с позиционированы и находятся в углу. переформулируйте ваш вопрос, сейчас не очень понятно что же вам там анимировать нужно, опишите результат который хотите получить

[Aleksandr]

Alex: Я уже разобрался, спасибо )

Answer 2

[Сергей Кардашов]

Все намного проще, подключаешь GSAP и в примерах посмотри как анимировать элементы там получится меньше строк чем в codepen примере.
Через скрипт этот что угодно сможешь анимировать