Übergang zwischen open close in Details Element

Question

Ist es möglich, den Übergang zwischen dem Öffnen/Schließen-Status des Elements <details> mit nur CSS zu animieren?

Answer 1

Nein, derzeit nicht. Ja, aber nur wenn Sie die height kennen oder die font-size animieren können.

Ursprünglich war dies nicht der Fall. Von http://html5doctor.com/the-details-and-summary-elements/, "... wenn Sie CSS-Übergänge verwenden könnten, um das Öffnen und Schließen zu animieren, aber wir können noch nicht." (Es gibt einen Kommentar zu HTML5 Arzt am Ende, aber es scheint, JS zu erfordern die CSS-Animation zu erzwingen.)

Es war möglich, verschiedene Stile basierend auf verwenden, ob sie geöffnet oder geschlossen sind, geht jedoch tat es nicht "nimm" normalerweise. Heute funktionieren die Übergänge jedoch, wenn Sie die height kennen oder die font-size animieren können. Beispiele und weitere Details finden Sie unter http://codepen.io/morewry/pen/gbJvy.

Dies war die 2013-Lösung, die Art täuscht es:

CSS (Mai-Präfixe hinzufügen müssen)

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

heute Dies funktioniert:

CSS (Mai müssen Präfixe hinzufügen)

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

PS: Nur getestet in Chrome. Hear FF unterstützt details im Allgemeinen immer noch nicht. IE und Edge unterstützen immer noch nicht details.

(Sie können Keyframe-Animationen oder Übergänge verwenden, um alle möglichen anderen Animationen zu öffnen. Ich habe fadeInDown nur zu Illustrationszwecken gewählt. Es ist eine vernünftige Wahl, die ein ähnliches Gefühl geben wird, wenn Sie nicht hinzufügen können Markup oder nicht wissen, die Höhe des Inhalts.Ihre Optionen sind jedoch nicht darauf beschränkt: siehe die Kommentare zu dieser Antwort, die zwei Alternativen, einschließlich der font-size Ansatz enthalten.)

Answer 2

Angesichts der Höhe muss schnappen Irgendwann bevorzuge ich es, die Höhe zu animieren und dann zu schnappen. Wenn Sie das Glück haben, alle Elemente in einer ähnlichen Höhe zu haben, kann diese Lösung sehr effektiv sein. (Sie müssen tun, ein div in Ihrem Detail Elemente obwohl)

@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; 
} 

siehe http://dabblet.com/gist/5866920 zum Beispiel

Answer 3

Meine kurze Antwort lautet: Sie können nicht zwischen Zusammenfassung und dem Rest der Details Inhalts übergehen.

ABER!Ich antworte, weil es die erste war:

Sie können in der Zusammenfassung zwischen dem Selektor Details und Details [open]

details{ 
 
    position: relative; 
 
    width: 100px;height: 100px; 
 
    perspective: 1000px; 
 
} 
 
div{ 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100px;height: 100px; 
 
    background: black; 
 
} 
 
details .transition{ 
 
    transition: 1s linear; 
 
    transform-origin: right top; 
 
    ; 
 
} 
 
details[open] .transition{ 
 
    transform: rotateY(180deg); 
 
    background: orangered; 
 
}

<details> 
 
    <summary> 
 
    <div></div> 
 
    <div class="transition"></div> 
 
    </summary> 
 
</details>

NB einigen schönen Übergang tun Ergebnis daraus googlen!

Answer 4

Natürlich ist es möglich:

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