React Frontend Developer

Question 1

Почему при центрировании через position: absolute и top/left: 50% часто используют transform: translate(-50%, -50%)?

Accepted Answer

transform: translate(-50%, -50%) смещает элемент обратно на половину его собственной ширины и высоты, что позволяет точно отцентрировать элемент относительно точки top/left: 50%.

Question 2

Почему transform считается более производительным для анимаций?

Accepted Answer

transform не вызывает перерасчёт Layout.Он работает на этапе Composite.Браузер может обрабатывать такие анимации на GPU.Это делает анимации более плавными и менее затратными.

Question 3

Какие плюсы и минусы у многоэтапных анимаций (video → SVG → scale / transform)?

Accepted Answer

Многоэтапные анимации позволяют добиться вау-эффекта и гибкости, но усложняют реализацию и поддержку. Они увеличивают количество ассетов и логики синхронизации. Часто такие анимации тяжелее оптимизировать и тестировать. Их используют, когда один формат не даёт нужного результата. Важно понимать, оправдана ли такая сложность.

Question 4

Чем отличается transform от position при анимации?

Accepted Answer

Transform использует GPU для перемещения элемента без изменения его геометрии, что вызывает только композитинг. Position изменяет положение элемента через свойства top/left, что вызывает перерасчет layout (reflow) и repaint, нагружая CPU. Transform работает быстрее и плавнее, особенно при анимации.

Вопросы React Frontend Developer