Dus ik heb eerder CSS-overgangen gebruikt, maar ik heb een uniek geval met deze. Ik ben een aangepaste plug-in aan het schrijven voor het maken van modals. In wezen maak ik on-the-fly een div document.createElement('div')en voeg deze toe aan de body met een paar klassen. Deze klassen definiëren kleur en dekking. Ik zou graag strikt CSS gebruiken om in deze div te kunnen vervagen, maar het lijkt moeilijk om de status te wijzigen, omdat ze enige gebruikersinteractie vereisen.
Geprobeerde een aantal geavanceerde selectors in de hoop dat het een statusverandering zou veroorzaken, probeerde mediaquery’s in de hoop de status te veranderen… op zoek naar ideeën en suggesties, ik wil dit indien mogelijk echt in CSS houden
Antwoord 1, autoriteit 100%
Ondersteuning voor CSS-keyframes is tegenwoordig redelijk goed:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<h1 class="fade-in">Fade Me Down Scotty</h1>Antwoord 2, autoriteit 19%
Ok, ten eerste weet ik niet zeker hoe het werkt als je een div maakt met (document.createElement('div')), dus ik kan het nu mis hebben, maar zou’ Is het mogelijk om hiervoor de :target pseudo class selector te gebruiken?
Als je de onderstaande code bekijkt, kun je zien dat ik een link heb gebruikt om de div te targeten, maar in jouw geval is het misschien mogelijk om in plaats daarvan #newte targeten vanuit het script en dat manier om de div in te laten faden zonder gebruikersinteractie, of denk ik verkeerd?
Hier is de code voor mijn voorbeeld:
HTML
<a href="#new">Click</a>
<div id="new">
Fade in ...
</div>
CSS
#new {
width: 100px;
height: 100px;
border: 1px solid #000000;
opacity: 0;
}
#new:target {
-webkit-transition: opacity 2.0s ease-in;
-moz-transition: opacity 2.0s ease-in;
-o-transition: opacity 2.0s ease-in;
opacity: 1;
}
… en hier is een jsFiddle
Antwoord 3, autoriteit 13%
Ik geloof dat je Class aan het element zou kunnen toevoegen. Maar hoe dan ook, je zou JQuery of reg JS moeten gebruiken
div {
opacity:0;
transition:opacity 1s linear;*
}
div.SomeClass {
opacity:1;
}
Antwoord 4, autoriteit 2%
Ik gebruik altijd liever mixins voor kleine CSS-klassen, zoals fade in/out als je ze in meer dan één klasse wilt gebruiken.
@mixin fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
en als je geen mixins wilt gebruiken, kun je een normale klasse .fade-in maken.