Как плавно скрыть элемент и после убрать его из дом дерева?

Question

[shading]

Добрый день.
Нужно плавно скрыть элемент и после убрать его из дом дерева, возможно ли это сделать только при помощи css(нужно, чтобы другие элементы заняли его место)? Или можно только поменять стили у элемента и потом с помощью setTimeout изменять ему св-во display?

Answer 1

[Seanyr]

Средствами css убрать из дом нельзя.
Можно скрыть из потока, но все связанные с этим свойства не анимируются.
А можно, например, сделать чтобы он не занимал места в потоке или придумать еще какие-нибудь костыли:

Answer 2

[yavaskript]

изменение дома происходит через JavaScript. Полностью удалить его из дома средствами CSS не получится. Просто скрыть можно

Comments

[shading]

Видимо я немного некорректно задал вопрос.
Смотри, у меня есть какой-то элемент, я ему меняю opacity на 0, при этом добавляю св-во transition: opacity 1s, при определенных условиях он плавно исчезает, а можно ли посредством css и убрать его из потока рендера, чтобы на его место могли встать другие элементы?

[shading]

Или это делается только через js?

[Антон]

shading, Ответ после вашего уточнения получается такой же

[yavaskript]

shading, он у вас становится прозрачный, но все равно занимает место? Чтобы он "как-бы" исчез, используйте display: none. Тогда он перестанет занимать место на странице, и на его место сдвинутся другие элементы. Но в доме он все равно останется

Answer 3

[Евгений Винокуров]

Как я понял, ответ так и не был дан. С помощью CSS - никак, ведь CSS не могёт менять DOM-дерево.

С помощью JS - запросто, но уж точно не через setTimeout!

const item = document.querySelector('.item');

item.style.opacity = '0';

item.addEventListener('transitionend', function() {this.remove()});

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

PS: по поводу совместимости у 'transitionend' - все чикибамбони. Поддерживает даже IE10+