Ayrıntılar arasında aç close element

Question

Sadece CSS ile <details> öğesinin açık/kapalı durumu arasındaki geçişi canlandırmak mümkün mü?

Answer 1

Hayır, şu anda değil. Evet, ancak yalnızca height'u biliyorsanız veya font-size'u canlandırabilirseniz.

Aslında, durum böyle değildi. http://html5doctor.com/the-details-and-summary-elements/, 'dan "... açılış ve kapanışa animasyon uygulamak için CSS geçişlerini kullanabiliyorsanız, ancak henüz yapamayız." (HTML5 dokümanı sonuna yakın bir yorum var, ancak JS'nin CSS animasyonunu zorlamasını gerektiriyor gibi görünüyor.)

Açık veya kapalı olmasına bağlı olarak farklı stiller kullanmak mümkündü, ancak geçişler yapmadı normal olarak "al". Ancak, bugün, geçişler height'u biliyorsanız veya font-size'u canlandırabilirseniz işe yarar. Örnekler ve daha fazla ayrıntı için bkz. http://codepen.io/morewry/pen/gbJvy.

CSS

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

Bu bugünkü çalışmasına (eklerler gerekir Mayıs):

Bu

çeşit o sahte 2013 çözümdü:

CSS

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

PS (eklerler gerekir Mayıs): Sadece Chrome'da test etti. Duymak FF hala genel olarak details'u desteklemiyor. IE ve Edge hala details'u desteklemiyor.

(Açılış için her türlü diğer animasyonları yapmak için anahtar kare animasyonlarını veya geçişlerini kullanabilirsiniz.) Yalnızca örnekleme amacıyla fadeInDown seçtim.Ayrıca ekleyemiyorsanız, benzer bir his veren makul bir seçimdir işaretleme veya içeriğin yüksekliğini bilmeyecek. Ancak, seçenekleriniz bunlarla sınırlı değil: font-size yaklaşımı dahil olmak üzere iki alternatif içeren yorumları okuyun.)

Answer 2

Yükseklik Bir nokta yüksekliğe animasyon ve daha sonra baştan başlamak için tercih etmeyi tercih ederim. Eğer tüm elemanların benzer bir yüksekliğe sahip olması için yeterince şanslıysanız, bu çözüm oldukça etkili olabilir.

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

örneğin http://dabblet.com/gist/5866920 (bkz olsa ayrıntıları öğelerinin içindeki bir div gerekiyor)

Answer 3

Benim Kısa cevap: Eğer özeti ve ayrıntıları içeriğinin kalanı arasında geçiş olamaz.

AMA!

Sen detayları ve ayrıntı [açık] selektör arasındaki özet

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 içindeki bazı güzel geçiş yapabilirsiniz: İlk çünkü bu cevap Bunun üzerinden googling sonucu!

Answer 4

Elbette bu mümkün:

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