Wie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?

Glatte Übergänge für CSS-Anzeige- und Deckkrafteigenschaften erstellen

Sie sind auf ein Problem gestoßen, bei dem Sie versuchen, die Anzeige und Deckkraft zu animieren Eigenschaften eines Elements, aber die Anzeigeänderung stört den Übergang. Um das gewünschte Ergebnis zu erzielen, bei dem die Deckkraft fließend übergeht, während sich die Anzeigeeigenschaft abrupt ändert, können Sie die folgende Lösung verwenden:

Michaels Antwort bietet einen umfassenden CSS-Code-Ansatz:

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}</code>

Dies Code verwendet Keyframes, um die Deckkraft und Anzeigeeigenschaften separat zu animieren. Die Anzeigeeigenschaft ändert sich abrupt von „Keine“ auf „Blockieren“ bei 0 %, während die Deckkraft gemäß der angegebenen Beschleunigungsfunktion innerhalb von 0,5 Sekunden sanft von 0 auf 1 übergeht.

Das obige ist der detaillierte Inhalt vonWie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!