Transizione tra l'elemento close close close

Question

È possibile animare la transizione tra lo stato di apertura/chiusura dell'elemento <details> con solo CSS?

Answer 1

No, non attualmente. Sì, ma solo se si conosce lo height o si può animare lo font-size.

In origine, questo non era il caso. Da http://html5doctor.com/the-details-and-summary-elements/, "... se potessi usare le transizioni CSS per animare l'apertura e la chiusura, ma non possiamo ancora." (C'è un commento al medico HTML5 verso la fine, ma sembra richiedere a JS di forzare l'animazione CSS.)

Era possibile utilizzare stili diversi in base al fatto che fosse aperto o chiuso, ma le transizioni non "prendere" normalmente. Oggi, tuttavia, le transizioni funzionano se si conosce lo height o si può animare lo font-size. Vedi http://codepen.io/morewry/pen/gbJvy per esempi e maggiori dettagli.

questa era la soluzione 2013 questo tipo di falsi esso:

CSS (potrebbe essere necessario aggiungere prefissi)

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

Questo funziona oggi:

CSS (potrebbe essere necessario aggiungere prefissi)

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

PS: testato solo in Chrome. Hear FF non supporta ancora lo details in generale. IE e Edge non supportano ancora details.

(È possibile utilizzare animazioni o transizioni di fotogrammi chiave per eseguire tutti i tipi di altre animazioni per l'apertura. Ho scelto fadeInDown a scopo illustrativo. È una scelta ragionevole che darà una sensazione simile se non si riesce ad aggiungere altro markup o non conoscerà l'altezza dei contenuti. Le tue opzioni, tuttavia, non sono limitate a questo: vedere i commenti su questa risposta che includono due alternative, incluso l'approccio font-size.)

Answer 2

Data l'altezza deve scattare a un certo punto preferisco iniziare ad animare l'altezza e quindi scattare. Se sei abbastanza fortunato da avere tutti gli elementi di altezza simile, questa soluzione può essere abbastanza efficace. (Avete bisogno di un div Interni in dettaglio gli elementi però)

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

vedere http://dabblet.com/gist/5866920 ad esempio

Answer 3

La mia risposta è: non è possibile transizione tra sintesi e il resto del contenuto dettagli.

MA!

Si può fare qualche bel passaggio all'interno della sintesi tra il selettore dettagli e dettagli [aperto]

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: Rispondo questo perché è stata la prima risultato da googling su questo!

Answer 4

Naturalmente è possibile:

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