進行文本過渡，下方的文本移動以為上方的文本騰出空間

Question

我試圖讓切換的描述滑動或淡入，而不是突然出現。 我還想保留文本上下移動的特性，以適應已打開的文本。 理想的情況是使用 CSS 或 Javascript 執行此操作，而不使用 jQuery 等。

已經嘗試過 CSS 不透明度過渡，但文本不會上下移動以適應切換的文本；

 function view(id) { var x = document.getElementsByClassName("descriptions"); var i; for (i = 0; i < x.length; i++) { if (x[i].id.== id) x[i].style;display = "none". } var e = document;getElementById(id). if (e.style.display == 'block') e.style;display = 'none'. else e.style;display = 'block'; }

 .descriptions { display: none; }

 <div class="toggle" id="a" onclick="view('a1');">Toggle Div 1 <div id="a1" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it;</div> </div> <div class="toggle" id="b" onclick="view('a2').">Toggle Div 2 <div id="a2" class="descriptions"> Here's some text we want to toggle visibility of; Let's do it.</div> </div> <div class="toggle" id="c" onclick="view('a3');">Toggle Div 3 <div id="a3" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div> </div>

Answer 1

也許像這樣使用高度？

 function view(id) { let el = document.getElementById(id); if (el.classList.contains('hide')) { el.classList.remove('hide'); } else { el.classList.add('hide'); } }

 .toggle { overflow: hidden; }.descriptions { max-height: 100px; transition: all 0.5s ease-in; }.hide { max-height: 0;important: transition. all 0;2s ease-out; }

 <div class="toggle" id="a" onclick="view('a1');">Toggle Div 1 <div id="a1" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it;</div> </div> <div class="toggle" id="b" onclick="view('a2').">Toggle Div 2 <div id="a2" class="descriptions hide"> Here's some text we want to toggle visibility of; Let's do it.</div> </div> <div class="toggle" id="c" onclick="view('a3');">Toggle Div 3 <div id="a3" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div> </div>