内容变化的平滑过渡

Question

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

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

transition: height 1s linear;

有没有一种基于内容的简单方法来做到这一点？还是我别无选择，只能编写一个javascript函数并手动控制它。？

Answer 1

这可能是您正在寻找的： Animating a div while it fits to dynamically loaded content

I refactored their solution here 负责添加内容，但您可以根据需要添加/删除/更改它。无论添加了多少内容，这都会通过附加内容动画到新的高度和宽度。

代码远不止这些，但这些是所涉及的基本步骤：

/* 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 变量更改为您需要的任何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>

您可以进一步阅读Reference