Как сделать чтобы после Timeout с анимацией исчезал div на чистом JS?

Question

Как этот код написать на чистом JavaScript?

В нем автоматом в течение 3х секунд div проподает:

setTimeout( function() {
    $('#message').fadeOut('slow');
    },  3000);

UPD Спасибо за ответы! Но у меня анимация и opacity не поможет потому, что после него остается местно на странице, а должно все пропасть.

Answer 1

Если вам не нужна анимация, то вполне подойдет такое решение

setTimeout(function() {
  document.querySelector('#message').style.display = 'none';
},  3000);

#message {
  height: 50px;
  width: 100%;
  background-color: red;
}

<div id="message"></div>

Answer 2

Если без анимации, то очень просто:

    function Hide(){ // Можно создать функцию скрытия поля, чтобы при необходимости можно было с ней работать в других вызовах
        document.getElementById('message').style.display = "none";
    }
    setTimeout(Hide, 3000); //Ставим таймаут на скрытие

<div id="message">Пурум Пум Пум</div>

Если хотите анимацию, что можно использовать opacity, но он просто делает его невидимым, но не удаляется как display: none, а продолжает занимать место на странице, просто невидимый.

    function Hide(){
        document.getElementById('message').classList.add('slow');
    }
    setTimeout(Hide, 3000);

    .slow {
        opacity: 0;
        transition: 2s;
    }

<div id="message">Пурум Пум Пум</div>

Для плавного скрытия, а потом исчезновения, можно объединить.

    function Hide1(){ // Можно создать функцию скрытия поля, чтобы при необходимости можно было с ней работать в других вызовах
        document.getElementById('message').style.display = "none";
    }
    function Hide(){
        document.getElementById('message').classList.add('slow');
    }
    setTimeout(Hide, 3000);
    setTimeout(Hide1, 5000); //Исчезает блок через 5 секунд - 3 секунды после загрузки и 2 секунды анимации.

    .slow {
        opacity: 0;
        transition: 2s;
    }

<div id="message">Пурум Пум Пум</div>

Answer 3

я конечно не суперспец, но вот

    let test = document.getElementById("test");
setTimeout( function() {
    test.style = 'display: none'
    },  3000);

https://codepen.io/LordOfTime/pen/zYxgygP

можно так же выставить стиль opacity: 0, но он просто станет невидимым, или выставить height: 0, тогда не будет занимать место. и не забудь тогда установить transition

БЛОГ НА HUSL

Как сделать чтобы после Timeout с анимацией исчезал div на чистом JS?

Ответы (3 шт):