CSS Auto скрывает элементы через 5 секунд

Можно ли скрыть элемент через 5 секунд после загрузки страницы? Я знаю, что есть решение jQuery.

Я хочу сделать то же самое, но надеюсь получить тот же результат с переходом CSS.

Любая инновационная идея? Или я прошу выйти за пределы перехода css/анимации?

Ответы

Ответ 1

ДА!

Но вы не можете сделать это так, как можете сразу подумать, потому что вы не можете оживить или создать переход по свойствам, на которые вы в противном случае положились (например, display или изменение размеров и настройка на overflow:hidden), чтобы правильно скрыть элемент и предотвратить его видимость.

Следовательно, создайте анимацию для рассматриваемых элементов и просто переключите visibility:hidden; через 5 секунд, а также установите высоту и ширину на ноль, чтобы элемент все еще занимал пространство в потоке DOM.

FIDDLE

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>

Ответ 2

Конечно, вы можете просто использовать setTimeout для изменения класса или чего-то другого, чтобы вызвать переход.

HTML:

<p id="aap">OHAI!</p>

CSS

p {
    opacity:1;
    transition:opacity 500ms;
}
p.waa {
    opacity:0;
}

JS для загрузки при загрузке или DOMContentReady:

setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);

Пример скрипта здесь.

Ответ 3

Почему бы не попробовать fadeOut?

$(document).ready(function() {
  $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>

Ответ 4

основанный на ответе @SW4, вы также можете добавить немного анимации в конце.

body > div{
    border:1px solid grey;
}
html, body, #container {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container {
    overflow:hidden;
    position:relative;
}
#hideMe {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

<div>
<div id='container'>
    <div id='hideMe'>Wait for it...</div>
</div>
</div>