web-dev-qa-db-fra.com

Css transition entre aucun affichage et bloc d'affichage, navigation avec subnav

C’est ce que j’ai lien jsFiddle

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

Pourquoi n'y a-t-il pas de transition? Si je mets

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 0; /* changed this line */
}

Alors le "subnav" n'apparaîtra jamais (bien sûr) mais pourquoi la transition sur l'opacité ne se déclenche-t-elle pas? Comment faire fonctionner la transition?

htmlcsscss3
42
caramba

Comme vous le savez, la propriété display ne peut pas être animée MAIS elle n’est pas animée, elle remplace les transitions visibility et opacity.

La solution ... vient de supprimer les propriétés display.

nav.main ul ul {
  position: absolute;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  background-color: rgba(92, 91, 87, 0.9);
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
  visibility: visible;
  opacity: 1;
}
<nav class="main">
  <ul>
    <li>
      <a href="">Lorem</a>
      <ul>
        <li><a href="">Ipsum</a>
        </li>
        <li><a href="">Dolor</a>
        </li>
        <li><a href="">Sit</a>
        </li>
        <li><a href="">Amet</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
63
Paulie_D

Généralement, lorsque les gens essaient d'animer display: none ce qu'ils veulent vraiment, c'est:

  1. Fondu de contenu dans, et
  2. L'élément ne prend pas de la place dans le document lorsqu'il est masqué

La plupart des réponses populaires utilisent visibility, qui ne peut atteindre le premier objectif, mais heureusement, il est tout aussi facile de réaliser les deux en utilisant position.

Puisque position: absolute supprime l'élément de la saisie de l'espacement des flux de documents, vous pouvez basculer entre position: absolute et position: static (valeur globale par défaut), associé à opacity. Voir l'exemple ci-dessous.

.content-page {
  position:absolute;
  opacity: 0;
}

.content-page.active {
  position: static;
  opacity: 1;
  transition: opacity 1s linear;
}
46
Matt R O'Connor

Vous pouvez le faire avec animation-keyframe plutôt qu'avec transition. Modifiez votre déclaration de survol et ajoutez l'image clé d'animation. Vous devrez peut-être également ajouter les préfixes du navigateur pour -moz- et -webkit-. Voir https://developer.mozilla.org/en/docs/Web/CSS/@keyframes pour plus d'informations.

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

Voici une mise à jour de votre violon. https://jsfiddle.net/orax9d9u/1/

17
spirift