Comment transférer de manière transparente les propriétés CSS « ​​d'affichage » et « d'opacité » en survol ?

Transition transparente des propriétés d'affichage et d'opacité CSS

Dans le domaine des animations CSS3, un problème survient lors de la tentative de transition de plusieurs propriétés, en particulier l'affichage et l'opacité. Comme vous l'avez souligné, lorsque la propriété d'affichage est modifiée lors du survol, cela perturbe la transition en douceur de l'opacité.

Pour résoudre ce dilemme, une solution créative a été imaginée. En utilisant la règle @keyframes, nous définissons essentiellement une animation personnalisée qui imite l'apparence de la transition de la propriété d'affichage. L'astuce consiste à passer gracieusement de "display: none" à "display: block" tout en contrôlant l'opacité de l'élément.

Le code CSS modifié présenté par Michael sert de solution élégante :

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

Dans ce code, la règle @keyframes définit une animation nommée "fadeInFromNone" qui fait passer l'opacité de l'élément de 0 à 1 tout en définissant simultanément la propriété d'affichage sur "block" de "none". La fonction de synchronisation et d'assouplissement peut être ajustée à votre guise.

En mettant en œuvre cette solution, vous pouvez facilement modifier les propriétés d'affichage et d'opacité, garantissant un effet fluide et visuellement captivant au survol.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!