Как избежать 'прыжков' блока при использовании position: fixed / absolute?

Question

[life]

Здравствуйте. Есть небольшой блок, который изначально фиксирован. Меняя класс, я хочу менять его положение, но почему то происходит прыжок + transition не срабатывает. Почему так происходит?

codepen.io/lifetowin/full/qamvpA

Answer 1

[Алексей Бульба]

Быстрее на главный класс вешать transition, а манипуляции с позиционированием через дополнительные.
у вас же перестраивается DOM дерево с изменение класса, соответственно и стили тоже.

К примеру

.bazon {
transition: all 0.4s ease;
}
.bazon--top{
top:-105px;
}

Comments

[life]

Не помогло. Пробовал на все классы вешать transition и даже пробовал через absolute. Результат тот же. Единственный вариант который я нашел, это сразу аттачить класс в html, тогда все работает, но хотелось бы все таки вешать класс через js.

[Алексей Бульба]

life: тут важно не все классы, а чтобы у элемента было 2 класса. Остаёться JS?)

Answer 2

[life]

В общем с перерисовкой беда. Частично исправил добавив timeout, но пришлось добавить opacity для того чтобы скрыть момент перерисовки.