进行文本过渡，下方的文本移动以为上方的文本腾出空间

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>