Ik kan een element maken met een dekking van nul fade door zijn klasse naar .Elementtofadeinandout te veranderen met de volgende CSS:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
Is er een manier waarop ik het element kan laten verdwijnen nadat het vervaagt door CSS te bewerken voor dezelfde klasse?
Antwoord 1, Autoriteit 100%
Gebruik CSS @keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
Hier is een demo
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
@keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}<div class=elementToFadeInAndOut></div>Antwoord 2, Autoriteit 14%
Als u een enkele fadein / OUT nodig hebt zonder een expliciete gebruikersactie (zoals een mouseover / muisout), kunt u een CSS3 gebruiken animation: http://codepen.io/anon/pen/bdepww
.elementToFadeInAndOut {
animation: fadeinout 4s linear 1 forwards;
}
@keyframes fadeinout {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Door animation-fill-mode: forwardsDe animatie behoudt zijn laatste keyframe
Door in te stellen animation-iteration-count: 1De animatie wordt slechts één keer uitgevoerd (wijzig deze waarde als u het effect meer dan één keer moet herhalen)
Antwoord 3, Autoriteit 6%
Ik vond deze link om handig te zijn: CSS-trucs fade-in fade-out CSS .
Hier is een samenvatting van de CSstricks Post:
CSS-klassen:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
In react:
toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}
render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
Antwoord 4, Autoriteit 2%
Een manier om dit te doen zou zijn om de kleur van het element in te stellen op zwart, en dan vervagen naar de kleur van de achtergrond als volgt:
<style>
p {
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
from {color:black;}
to {color:white;}
}
</style>
<p>I am FADING!</p>
Ik hoop dat dit is wat je nodig had!
Antwoord 5
Probeer dit:
@keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}