Javascript 内容更改时的平滑过渡

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

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

transition: height 1s linear;

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

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

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

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

我更喜欢的Js解决方案

//这是最重要的部分！
函数collapseSection（元素）{
//获取元素内部内容的高度，而不管其实际大小
var sectionHeight=element.scrollHeight；
//暂时禁用所有css转换
var elementTransition=element.style.transition；
element.style.transition=''；
//在下一帧上（一旦上一个样式更改生效），
//显式地将元素的高度设置为其当前像素高度，因此
//没有从“自动”转换出去
requestAnimationFrame（函数（）{
element.style.height=截面高度+px；
element.style.transition=elementTransition；
//在下一帧上（一旦上一个样式更改生效），
//将元素转换为高度：0
requestAnimationFrame（函数（）{
element.style.height=0+'px'；
});
});
//将该部分标记为“当前已折叠”
setAttribute（'data-collapsed'，'true'）；
}
功能扩展部分（元素）{
//获取元素内部内容的高度，而不管其实际大小
var sectionHeight=element.scrollHeight；
//使元素过渡到其内部内容的高度
element.style.height=截面高度+px；
//当下一个css转换完成时（应该是我们刚刚触发的转换）
元素。addEventListener（'transitionend'，函数（e）{
//删除此事件侦听器，使其仅被触发一次
element.removeEventListener（'transitionend'，arguments.callee）；
//从元素的内联样式中删除“高度”，使其返回初始值
element.style.height=null；
});
//将该部分标记为“当前未折叠”
setAttribute（'data-collapsed'，'false'）；
}
document.querySelector（“#切换按钮”）.addEventListener（'click'，函数（e）{
var section=document.querySelector（'.section.collapsable'）；
var isCollapsed=section.getAttribute（'data-collapsed'）='true'；
如果（已合并）{
扩展段（段）
section.setAttribute（'data-collapsed'，'false'）
}否则{
collapseSection（部分）
}
});
.container.section{
溢出：隐藏；
过渡段：高度0.3s放松；
高度：自动；
}
* {
框大小：边框框；
}
身体{
保证金：0；
填充：10vh 10vw；
字体系列：arial；
}
p{
利润率：10px；
}
.集装箱{
边框：3px实心#ffeb3b；
保证金：0自动；
最大宽度：300px；
边界半径：3px；
}
.货柜组{
边框：3px实心#4caf50；
}
钮扣{
显示：块；
--webkit外观：无；
字号：18px；
边界：无；
边界半径：3px；
背景：2196f3；
颜色：白色；
利润率：15px自动；
填充：15px；
光标：指针；
过渡：框影0.2s缓出；
}
按钮：悬停{
盒影：0px 0px 15px浅灰色；
}
按钮：激活{
盒影：0px 0px 10px浅灰色；
}
按钮：焦点{
大纲：无；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

知识是一种美德，是一种美德，是一种美德，是一种美德

同一天，所有的人都会坐在一起，成为一名杰出的领导者，他们的工作和生活都是暂时的。但是，在最低限度上，我们需要一个实验室来进行日常工作。但是，在最低限度上，我们需要一个实验室来进行日常工作

切换折叠
这可能是您正在寻找的：

以说明添加内容的原因，但您可以根据需要添加/删除/更改内容。无论添加了多少内容，这将使用附加内容将动画设置为新的高度和宽度

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

/* 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内容，或者将
$（元素）.append（）
更改为
$（元素）.html（）
以完全更改内容，而不只是将项目添加到内容中。
这是否回答了您的问题？