动态添加内容时平滑 Div 扩展和滚动

Question

我有一个随机插入段落的 div。一旦 div 的大小变得比它的容器大，它当然会延伸到容器之外，从而在容器上创建滚动条。所以那部分没问题。 带有滚动条的容器不是页面，滚动条出现在父div上

问题有两个方面。当插入段落以使 div 变大时，div 会立即跳转到新的大小。经过足够多的时间后，它会很快变得烦人。

另一个问题是当 div 延伸到容器之外时，我可以轻松地使用 javascript 将容器一直向下滚动，但是再一次，它是一个即时跳转，一遍又一遍地观看并不是很愉快。

我正在寻找一种方法来解决这个问题，让 div 平滑地展开以包含新段落，并让父 div 平滑地向下滚动（如果它超出它）。

还应注意，这是一个电子 html5 应用程序，因此不需要跨浏览器解决方案或浏览器兼容性。仅适用于最新最前沿的 chrome 版本。我也不关心解决方案是纯 JavaScript 还是基于框架。

这可能吗？如果可以，我将如何实现？

Answer 1

你可以用 CSS 和一点 js 来解决这两个问题。断断续续的动画可以受益于过渡，透明度和高度会通过在创建时添加一个类逐渐增长到新值。

.box { 
    opacity: 0;
    height: 1px;  
    transition: opacity 2s, height 2s; 
} 

.box.loading {
     opacity: 1;
     height: 200px;
 }

元素的插入应该跟随平滑滚动，您可以在没有 jQuery 的情况下存档，请参见此处Javascript smooth scroll WITHOUT the use of jQuery

ps：我是在手机上写的，所以我没有检查代码。