Transition entre open close dans l'élément details

Est-il possible d'animer la transition entre l'état ouverture/fermeture de la <details> élément avec juste le CSS?

source d'informationauteur olanod

  1. 11

    non, pas actuellement. Oui, mais seulement si vous connaissez le height ou animer les font-size.

    À l'origine, ce n'était pas le cas. De http://html5doctor.com/the-details-and-summary-elements/"...si vous pouviez utiliser les transitions CSS pour animer l'ouverture et de la fermeture, mais nous ne pouvons pas tout de suite. (Il y a un commentaire à HTML5 médecin près de la fin, mais il semble que ce besoin de JS pour forcer le CSS animation.)

    Il était possible d'utiliser des styles différents, selon qu'elle est ouverte ou fermée, mais les transitions ne sont pas "prendre" normalement. Aujourd'hui, cependant, les transitions ne travail si vous connaissez la height ou animer les font-size. Voir http://codepen.io/morewry/pen/gbJvy pour des exemples et plus de détails.

    C'était la 2013 solution de ce genre de faux:

    CSS (Peut-être besoin d'ajouter des préfixes)

    /* http://daneden.me/animate/*/
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-1.25em);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.details-animated[open] {
    animation-name: fadeInDown;
    animation-duration: 0.5s;
}

    HTML

    <details class="details-animated">
    <summary>CSS Animation - Summary</summary>
    Try using [Dan Eden's fadeInDown][1] to maybe fake it a little.  Yay, some animation.
</details>

    Cela fonctionne aujourd'hui:

    CSS (Peut-être besoin d'ajouter des préfixes)

    .details-animated {
  transition: height 1s ease;
}
.details-animated:not([open]) { height: 1.25em; }
.details-animated[open] { height: 3.75em; }

    PS: testé Uniquement dans le navigateur Chrome. Entendre FF n'est toujours pas en charge details en général. IE et le Bord n'est pas toujours le soutien details.

    (Vous pouvez utiliser les animations d'images clés ou des transitions de faire toutes sortes d'autres animations pour les ouvrir. J'ai choisi fadeInDown à des fins d'illustration seulement. C'est un choix raisonnable qui vous donnera une sensation semblable si vous ne parvenez pas à ajouter de la majoration ou ne connaissent pas la hauteur du contenu. Vos options sont, cependant, ne se limite pas à cela: voir les commentaires sur cette réponse qui comprennent deux alternatives, y compris la font-size approche.)

  2. 3

    Compte tenu de la hauteur a pour composant logiciel enfichable à un certain point, je préfère commencer à animer la hauteur puis en composant logiciel enfichable. Si votre assez chanceux pour avoir tous les éléments d'une même hauteur que cette solution peut être très efficace. (vous avez besoin d'une div à l'intérieur de votre détails des éléments de tout de même)

    @keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 20px; /* height of your smallest content, e.g. one line */
    }
}
details {
    max-width:400px;
}
details[open]>div {
    animation-name: slideDown;
    animation-duration: 200ms;
    animation-timing-function:ease-in;
    overflow:hidden;
}

    voir http://dabblet.com/gist/5866920 par exemple

  3. 0

    Bien sûr, c'est possible:

    <style type="text/css">    
    DETAILS[open] SUMMARY ~ * {
        animation: sweep .5s ease-in-out;
    }
    @keyframes sweep {
        0%    {opacity: 0; margin-left: -10px}
        100%  {opacity: 1; margin-left: 0px}
    }
</style>