Может кто-нибудь объяснить мне разницу в изменении позиционных свойств left или right или -transform: translateX(n), так как оба, похоже, достигли того же, но могут применяться независимо. Я понимаю о возможности аппаратного ускорения, но это зависит от реализации.
// psuedo code;
#box {
-transition-property: all;
-transition-duration: 1s;
}
// javascript
box.style.transform = "translateX(200px)";
vs
box.style.left = "200px";
Какое преимущество одного над другим? Спасибо,
р
Позиция зависит от того, для чего установлен position, transform работает от самого элемента. Таким образом, вы могли видеть transform как идентичные position:relative;.
Однако вы все равно можете использовать transform на абсолютно позиционированном элементе (чтобы относить его относительно без необходимости использования дополнительного элемента или прибегать к полям), а также transform быть CSS3, поэтому, если вы можете использовать position вместо вы должны.
top и left Свойства CSS работают только с элементами, расположенными relative, absolute или fixed. Кроме того, свойства top и left полагаются на родительскую позицию (относительно нее, абсолютную или статическую). Эти настройки не влияют на перевод.
Преобразования перевода "идентичны" для применения top и left, когда элемент имеет position: relative. В любом другом случае они не являются одними и теми же операциями.
Есть хорошая статья: Почему перемещение элементов с помощью Translate() лучше, чем Pos: abs Top/left
Порядок рендеринга слоев:
Перерисовка в любом слое вызовет перерисовку в каждом последующем слое.
Изменение left или margin вызовет перерисовку в макете (что, в свою очередь, вызовет перерисовку в двух других слоях) для анимированного элемента и для последующих элементов в DOM.
Изменение transform вызовет перерисовку в слое композитора только для анимированного элемента (последующие элементы в DOM не будут перерисованы).
Разница в производительности (следовательно, в кадрах в секунду или, проще говоря, в плавности анимации) является экспоненциальной. Использование первого метода часто приводит к дрожанию анимации даже на хороших машинах (когда процессор занят), в то время как второй, вероятно, будет работать гладко даже в системах с ограниченными ресурсами.
Еще одним преимуществом использования transform является то, что перерисовки композитора сильно оптимизированы (анимация для нескольких элементов приводит к одной перерисовке для всех), в то время как изменение слоя макета будет вызывать перерисовку после каждого изменения каждого элемента.
Для более подробного объяснения методов рендеринга и эффективности рендеринга я рекомендую Google Web Fundamentals.