CSS трансформация против позиции

Question

Может, кто-нибудь объяснит мне разницу в переносе позиционных свойств 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";

В чем преимущество одного над другим? Спасибо,

р

Answer 1

Положение зависит от того, что установлено на position, transform работает от самого элемента.Таким образом, вы могли бы видеть transform идентичным position:relative;.

Однако вы все равно можете использовать transform на абсолютно позиционированном элементе (чтобы позиционировать его относительно, не требуя дополнительногоэлемент или использование полей), а также transform, являющийся CSS3, так что если вы можете использовать position вместо этого, вы должны.

Answer 2

top и left Свойства CSS работают только с элементами, расположенными relative, absolute или fixed.Кроме того, свойства top и left зависят от положения родителя (относительно него, абсолютного или статического).Эти настройки не влияют на переводы.

---

Преобразования перевода "идентичны" применению top и left, когда элемент имеет position: relative.В любом другом случае они не являются одинаковыми операциями.

Answer 3

Порядок рисования слоев рендеринга:

• макет слоя
• слой краски
• композитный слой

Перерисовка в слое вызовет перерисовку в последующих слоях.

Изменение left или margin вызовет перерисовку в слое макета (что, в свою очередь, вызовет перерисовку в двух других слоях) для анимированного элемента и для последующих элементов в ДОМ .

Изменение transform вызовет перерисовку в слое композитора только для анимированного элемента (последующие элементы в DOM не будут перерисовываться).

Разница в производительности (следовательно, в кадрах в секунду или, проще говоря, в плавности анимации) экспоненциальная. Использование первого метода часто приводит к дрожанию анимации даже на хороших машинах (когда процессор занят), тогда как второй, скорее всего, будет работать гладко даже в системах с ограниченными ресурсами.

Еще одним преимуществом использования transform s является то, что перерисовки композитора сильно оптимизированы (анимация для нескольких элементов приводит к одной перерисовке для всех), в то время как изменение слоя макета будет вызывать перерисовку после каждого изменения каждого элемента.

Для более подробного объяснения методов рендеринга и производительности рендеринга я рекомендую Веб-основы Google .