CSS Masquer automatiquement 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 une 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 la transition/animation css?
4 réponses
Oui!
Mais vous ne pouvez pas le faire comme vous le pensez immédiatement, car vous ne pouvez pas animer ou créer une transition autour des propriétés sur lesquelles vous vous appuieriez (par exemple display, ou changer les dimensions et définir overflow:hidden) afin de masquer correctement l'élément et l'empêcher de prendre de l'espace visible.
Par conséquent, créez une animation pour les éléments en question, et basculez simplement visibility:hidden; après 5 secondes, tout en réglant la hauteur et la largeur à zéro pour éviter l'élément de l'espace occupant encore 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>
Bien sûr, vous pouvez simplement utiliser setTimeout pour changer une classe ou quelque chose pour déclencher 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);
Basé sur la réponse de @ SW4, vous pouvez également ajouter un peu d'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 opacity. Assurez-vous 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é.
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 Pur):