百度知道的这种蒙层效果怎么实现的

Question

如上图所示的效果，当文字内容很多的时候，固定文字内容区域为一个固定高度，并且文字区域底部显示半透明的遮罩，当点击“展开”的时候，文字区域高度全部展开，半透明遮罩效果消失。
这个效果只通过js、css可以实现吗，如果可以，会不会有闪一下的效果，因为js需要等文字内容全部渲染出来后才可以生效。不知道是否有更好的方法。

Answer 1

特意去看下结构
可以通过css和js实现，div固定高度后，文字生效前就可以把这遮罩放上去了呀，这样就可以了。

Answer 2

纯css就可以，使用伪类加上渐变效果实现：

<div class="text-box">
  <p>文本段落文本段落文本段落...</p>
</div>

.text-box{
  position: relative;
  margin: 0 auto;
  width:300px;
  height: 250px;
  background-color: #ddd;
  overflow: hidden;
}
.text-box>p{
  padding: 0;
  margin: 0;
}

.text-box:after{
  content:"";
  position: absolute;
  left:0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), white);
}

Answer 3

想问一下楼主最后如何解决了，现在卡在了一个问题上面：如何在不选的前提下知道元素的高度。