如何淡出渲染组件的底部边缘直到重新渲染？

Question

我正在使用react和react-bootstrap为电子商务网站构建评论微服务，并在按钮上显示5条评论以扩展显示的评论。我希望在我的reviewList组件中的评论组件列表的底部，直到我单击该按钮以显示更多评论之前，边缘会被淡化。

我有一个来自Etsy的例子，说明了我想要的外观。

我已经尝试了一些CSS和react-bootstrap，但是我只需要review组件的整个reviewList组件的底部即可淡入淡出。

这是示例：

您可以看到最后一条评论的底部已消失。

我希望在单击扩展按钮之前，让底部处于淡入淡出的状态，但只能找到使每个评论组件动起来或使之淡化的方式。

Answer 1

您需要对容器组件进行样式设置，以使容器的底部边缘具有伪元素，其伪元素具有透明至半透明至不透明的背景。这可以通过为容器创建一个伪元素并将其背景图像设置为具有线性渐变（不透明性来自rgba颜色（rgba中的a为透明度））来实现。

或者，您可以在photoshop中将透明背景设置为不透明，并将其设置为背景图像。

<div className="review-list-container">
    <ReviewList />
</div>

.review-list-container::after {
  content: '';
  position: absolute;
  display: block;
  width: 300px;
  height: 100px;
  bottom: 50px;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); / 
  /*alternatively, create desired gradient effect as a png in photoshop */
}

参见此处-https://codepen.io/Roughton/pen/dBxmdw