CSS 過渡在切換時沒有動畫

Question

我做了一個小手風琴，我想制作動畫。 我有以下代碼，但所寫的 animation 不起作用，我不知道為什么。

我知道讓高度起作用有點復雜，但我設法使用max-height找到了解決方法。

我希望我的div有一個動畫寬度和高度，讓它感覺就像你展開它一樣。

奇怪的行為是，如果你調整 window 的大小，一切似乎都是動畫的......

 document.getElementById("ping").onclick = function () { console.log(this); this.children[1].classList.toggle("active"); };

 .content.active { display: block; max-height: 200px; transition-property: width, max-height; transition-duration: 400ms, 100ms; transition-timing-function: cubic-bezier(0.305, 0, 0, 1.015); transition-delay: 400ms, 100ms; width: 40vw; background: orange; }.content { width: 0px; max-height: 0px; transition-property: width, max-height; transition-timing-function: cubic-bezier(0.305, 0.000, 0.000, 1.015); transition-duration: 400ms, 100ms; transition-delay: 100ms, 100ms; background: orange; display: none; }.cat.active { background: orange; }

 <section id="item0"> <div id="ping" class="cat"> <div class="title active" style=""> <a>Open</a> </div> <div class="content" style=""> <div> <div class="images"> first test <br> another </div> </div> </div> </section>

Answer 1

1.) 僅將transition參數應用於初始 state，而不應用於.active狀態/類。

2.) 不要使用display:none和block ，而是在max-height: 0和width: 0及其“.active”值之間轉換。

3.) 要隱藏溢出的內容（仍然可見），請將overflow: hidden應用於初始 state

 document.getElementById("ping").onclick = function () { console.log(this); this.children[1].classList.toggle("active"); };

 .content.active { max-height: 200px; width: 40vw; }.content { max-height: 0; width: 0px; transition-property: width, max-height; transition-duration: 400ms, 100ms; transition-timing-function: cubic-bezier(0.305, 0, 0, 1.015); transition-delay: 400ms, 100ms; background: orange; overflow: hidden; }.cat.active { background: orange; }

 <section id="item0"> <div id="ping" class="cat"> <div class="title active" style=""> <a>Open</a> </div> <div class="content" style=""> <div> <div class="images"> first test <br> another </div> </div> </div> </section>