在詳細元素中打開關閉元素之間的過渡

Question

是否可以使用CSS對<details>元素的打開/關閉狀態之間的過渡進行動畫處理？

Answer 1

不，目前不是。是的，但前提是您知道height或可以動畫font-size。

最初，情況並非如此。從http://html5doctor.com/the-details-and-summary-elements/,「......如果你可以使用CSS轉換爲動畫的開啓和關閉設置動畫，但我們還不能。」（在HTML5醫生臨近結束時有一條評論，但它似乎要求JS強制CSS動畫。）

根據打開還是關閉使用不同樣式是可能的，但轉換沒有「正常」。然而，今天，如果您知道height或者可以動畫font-size，那麼過渡將起作用。有關示例和更多詳細信息，請參閱http://codepen.io/morewry/pen/gbJvy。

這是2013年解決方案一種是假貨吧：

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> 

這今天的工作原理：

CSS（可能需要添加前綴）

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

PS：在Chrome只測試。聽到FF一般不支持details。 IE和Edge仍不支持details。你可以使用關鍵幀動畫或轉換來做各種其他的動畫，但我只選擇了fadeInDown這是一個合理的選擇，如果你無法添加額外的東西，它會給人類似的感覺標記或不知道內容的高度，但您的選項不限於此：請參閱對此答案的評論，其中包括兩個備選方案，其中包括font-size方法。）

Answer 2

鑑於高度必須在有一點我更喜歡開始動畫的高度，然後捕捉。如果你有足夠的幸運，所有的元素都有相似的高度，這個解決方案可以非常有效。 （你需要你的內部細節元素一個div雖然）

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

看到http://dabblet.com/gist/5866920例如

Answer 3

我簡短的回答是：你不能總結和細節內容的其餘部分之間過渡。

但是！

你可以選擇之間的總結細節和細節【打開】

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裏面的一些很好的過渡：我回答這個問題，因爲它是第一個谷歌搜索結果！

Answer 4

當然，這是可能的：

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