内容变化的平滑过渡

Question

我有一个未知高度的 DIV，其内容可以从 javascript 事件中更改。 当内容更改时，DIV 会调整大小以适应新内容。 我想要做的是让 DIV 平滑地而不是突然地过渡到不同的高度。

我尝试将其添加到 DIV 的 CSS 中，但没有帮助。 除非我设置了元素的特定高度。

transition: height 1s linear;

有没有一种简单的方法可以根据内容做到这一点？ 或者我别无选择，只能编写一个javascript函数并手动控制它。？

Answer 1

这可能就是您要寻找的内容： 在适合动态加载的内容的情况下为 div 设置动画

我在这里重构了他们的解决方案以考虑添加内容，尽管您可以以任何需要的方式添加/删除/更改它。 无论添加的内容数量如何，这都将通过附加内容动画到新的高度和宽度。

代码比这更多，但这些是所涉及的基本步骤：

/* 1: Append Content to the animated element */
$(element).append(content);

/* 2: Set height & width to auto */
$(element).css({'width':'auto','height':'auto', 'padding':'15px 25px'});

/* 3: Set height & width to an initial value*/
$(element).css({'width':oldWidth+'px','height':oldHeight+'px'});

/* 4: Animate to the final values */
$(element).animate({
  'width':contentWidth+'px',
  'height':contentHeight+'px',
  'padding':'15px 25px'
}, 500);

您可以将content变量更改$(element).append()您需要的任何 html 内容，或者将$(element).append()更改$(element).html()以完全更改内容，而不仅仅是向它们附加项目。

Answer 2

在这种情况下，创建一个单独的转换类并将该类与 Javascript 事件一起添加到该 DIV。

document.getElementById('divID').className='CssTransitionClassName';

Answer 3

基本策略是手动执行浏览器拒绝执行的操作：计算元素内容的完整大小，然后 CSS 将元素转换为明确的像素大小。

我更喜欢的 Js 解决方案

 // This is the important part! function collapseSection(element) { // get the height of the element's inner content, regardless of its actual size var sectionHeight = element.scrollHeight; // temporarily disable all css transitions var elementTransition = element.style.transition; element.style.transition = ''; // on the next frame (as soon as the previous style change has taken effect), // explicitly set the element's height to its current pixel height, so we // aren't transitioning out of 'auto' requestAnimationFrame(function() { element.style.height = sectionHeight + 'px'; element.style.transition = elementTransition; // on the next frame (as soon as the previous style change has taken effect), // have the element transition to height: 0 requestAnimationFrame(function() { element.style.height = 0 + 'px'; }); }); // mark the section as "currently collapsed" element.setAttribute('data-collapsed', 'true'); } function expandSection(element) { // get the height of the element's inner content, regardless of its actual size var sectionHeight = element.scrollHeight; // have the element transition to the height of its inner content element.style.height = sectionHeight + 'px'; // when the next css transition finishes (which should be the one we just triggered) element.addEventListener('transitionend', function(e) { // remove this event listener so it only gets triggered once element.removeEventListener('transitionend', arguments.callee); // remove "height" from the element's inline styles, so it can return to its initial value element.style.height = null; }); // mark the section as "currently not collapsed" element.setAttribute('data-collapsed', 'false'); } document.querySelector('#toggle-button').addEventListener('click', function(e) { var section = document.querySelector('.section.collapsible'); var isCollapsed = section.getAttribute('data-collapsed') === 'true'; if(isCollapsed) { expandSection(section) section.setAttribute('data-collapsed', 'false') } else { collapseSection(section) } });

 .container .section { overflow: hidden; transition: height 0.3s ease-out; height: auto; } * { box-sizing: border-box; } body { margin: 0; padding: 10vh 10vw; font-family: arial; } p { margin: 10px; } .container { border: 3px solid #ffeb3b; margin: 0 auto; max-width: 300px; border-radius: 3px; } .container .section { border: 3px solid #4caf50; } button { display: block; --webkit-appearance: none; font-size: 18px; border: none; border-radius: 3px; background: #2196f3; color: white; margin: 15px auto; padding: 15px; cursor: pointer; transition: box-shadow 0.2s ease-out; } button:hover { box-shadow: 0px 0px 15px lightgrey; } button:active { box-shadow: 0px 0px 10px lightgrey; } button:focus { outline: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="section"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="section collapsible"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="section"> <p>Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <button id="toggle-button">Toggle collapse</button>

您可以进一步阅读 参考