Przejście między elementem open close in details

Question

Czy można animować przejście między stanem otwarcia/zamknięcia elementu <details> za pomocą samego CSS?

Answer 1

Nie, aktualnie nie. Tak, ale tylko jeśli znasz height lub możesz animować font-size.

Pierwotnie tak nie było. Od http://html5doctor.com/the-details-and-summary-elements/, "... gdybyś mógł użyć przejść CSS do animacji otwarcia i zamknięcia, ale nie możemy jeszcze tego zrobić." (Pod koniec jest komentarz do lekarza HTML5, ale wydaje się, że wymaga on JS do wymuszenia animacji CSS.)

Możliwe było użycie różnych stylów w zależności od tego, czy są otwarte czy zamknięte, ale przejścia nie "brać" normalnie. Dziś jednak przejścia działają, jeśli znasz height lub można animować font-size. Zobacz http://codepen.io/morewry/pen/gbJvy po przykłady i więcej szczegółów.

Było to rozwiązanie 2013 tego rodzaju podróbki to:

CSS (Może trzeba dodać przedrostki)

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

To działa dzisiaj:

CSS (Może trzeba dodać przedrostki)

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

PS: tylko przetestowane w Chrome. Hear FF wciąż nie obsługuje ogólnie details. IE i Edge nadal nie obsługują details.

(Możesz użyć animacji klatki kluczowej lub przejść, aby zrobić wszystkie inne animacje do otwarcia.) Wybrałem fadeInDown tylko dla celów ilustracyjnych. Jest to rozsądny wybór, który daje podobne odczucie, jeśli nie możesz dodać Twoje opcje nie są jednak ograniczone do wysokości zawartości: zobacz komentarze dotyczące tej odpowiedzi, które obejmują dwie alternatywy, w tym podejście font-size).

Answer 2

Ze względu na wysokość musi się zatrzasnąć W pewnym momencie wolę zacząć animować wysokość, a następnie przyciągać. Jeśli masz tyle szczęścia, że ​​wszystkie elementy mają podobną wysokość, to rozwiązanie może być całkiem skuteczne. (Ty potrzebować div wewnątrz swoimi elementami szczegóły choć)

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

zobaczyć http://dabblet.com/gist/5866920 np

Answer 3

Moja krótka odpowiedź brzmi: nie można przechodzić między streszczenia i pozostałej zawartości szczegółów.

ALE!

można zrobić jakieś fajne przejścia wewnątrz podsumowaniu pomiędzy selektorem szczegóły i szczegóły [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: Odpowiem na to, ponieważ był to pierwszy wynika z googlowania w tym!

Answer 4

Oczywiście jest to możliwe:

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