javascript - 内容变化的平稳过渡

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() 来完全改变内容，而不是仅仅向它们附加元素。