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

我有一个可以随机插入段落的div。一旦div的大小大于其容器，它当然会扩展到容器之外，从而在容器上创建滚动条。那部分没问题带有滚动条的容器不是页面，滚动条显示在父div上

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

另一个问题是，当div扩展到容器之外时，我可以很容易地使用javascript将容器向下滚动，但是，再一次，这是一个瞬间的跳转，一遍又一遍地观看不是很愉快

我正在寻找一种平滑的方法，让div平滑地展开以包含新的段落，如果父div延伸过它，则让父div平滑地向下滚动

还应该注意的是，这是一个电子html5应用程序，因此不需要跨浏览器解决方案或浏览器兼容性。只有一款在最新的chrome前沿版本中有效。我也不在乎解决方案是纯javascript还是基于框架的

---

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

您可以使用CSS和一点js解决这两个问题。通过在创建时添加一个类，不透明度和高度将逐渐增长到新值，起伏的动画可以从过渡中受益

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

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

插入元素之后应该是一个平滑的滚动，您可以在不使用jQuery的情况下将其归档，请参见此处

ps：我在电话上写这个，所以我没有检查代码