web-dev-qa-db-fra.com

CSS Auto masquer les éléments après 5 secondes

Est-il possible de masquer l'élément 5 secondes après le chargement de la page? Je sais qu'il y a ne solution jQuery .

Je veux faire exactement la même chose, mais en espérant obtenir le même résultat avec la transition CSS.

Une idée innovante? Ou est-ce que je demande au-delà de la limite de transition/animation css?

cssanimationtransition
40
Alfred

OUI!

Mais vous ne pouvez pas le faire comme vous le pensez tout de suite, car vous ne pouvez ni animer ni créer de transition autour des propriétés sur lesquelles vous vous feriez normalement (par exemple, display, ou en modifiant les dimensions et le paramètre sur overflow:hidden) afin de masquer correctement l’élément et de l’empêcher de prendre de la place.

Par conséquent, créez une animation pour les éléments en question et basculez simplement visibility:hidden; après 5 secondes, définissez également la hauteur et la largeur sur zéro pour éviter que l’élément n’occupe encore d’espace dans le flux DOM.

[~ # ~] violon [~ # ~]

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>
72
SW4

à partir de la réponse de @ SW4, vous pouvez également ajouter une petite animation à la fin.

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>

Faire les 0,5 secondes restantes pour animer l'attribut d'opacité. Assurez-vous juste de faire le calcul si vous changez la longueur. Dans ce cas, 90% de 5 secondes nous laisse 0,5 seconde pour animer l'opacité.

7
theredforest

Bien sûr, vous pouvez simplement utiliser setTimeout pour modifier une classe ou quelque chose qui déclenche la transition.

HTML:

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

CSS:

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

JS à exécuter en charge ou DOMContentReady:

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

Exemple de violon ici .

5
Niels Keurentjes

Pourquoi ne pas essayer 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>

fadeOut (Javascript Pure):

Comment créer un effet fadeOut avec du JavaScript pur

2
KingRider