CSS-переход исчезать элемент

Question

Я хочу скрыть элемент от видимого к невидимому.

Я знаю, что могу сделать это, используя:

element {
  opacity:1;
}

element.fade {
  opacity:0;
  transition: opacity .5s linear;
}

Проблема в том, что (сейчас) невидимый элементвсе еще присутствует, занимая место.

Я бы хотел, чтобы он исчез и затем полностью исчез, как если бы был установлен display:none.

Answer 1

Не используйте JS для этого.он не использует графический процессор и не ОХЛАЖДАЕТ.

это то, что вам нужно:

CSS3 переходы + не отображать + предотвращать переброс

Answer 2

Вы можете перехватить событие transitionEnd, а затем, когда затухание закончится, вы можете установить display: none в этом обработчике событий.Или вы можете использовать другой тип перехода, который заканчивается тем, что элемент не занимает места (например, переводит высоту в 0).

Чтобы подключить конец перехода, вы должны использовать что-то вроде этого:

// for webkit browsers
node.addEventListener('webkitTransitionEnd', function() {
        // set to display: none here
    }, false);

Используйте другие префиксы с событием transitionEnd для других браузеров.

Answer 3

Установите тайм-аут JavaScript на 0,5 с, а затем просто добавьте дополнительный CSS

var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {        
    element.style.display="none"; 
}, 500);