React JS 和 CSS，向上滚动数据库中的所有文本评论

Question

我正在尝试使用 React、CSS 和 Firebase 创建一个带有评论的帖子。我有这篇文章有 10 条评论。现在我想制作动画来向上滚动评论，而不是显示所有 10 条评论。

第一部分是我的 React JS 代码。

<div className="scroll-up">

    {

        comments.map((comment) => (

            <p>

                {comment.text}

            </p>

        ))

    }

</div>

第二部分是我的 CSS 代码：

.scroll-up {

    max-height: 100px;

    overflow: hidden;

    position: relative;

}

.scroll-up p {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    transform:translateY(100%);

    animation: scroll-up 3s linear infinite;

}

@keyframes scroll-up {

    0%   { 

        transform: translateY(100%);        

    }

    100% { 

        transform: translateY(-100%); 

    }

}

如果只有一个评论，动画效果很好。评论将向上滚动 3 秒并重复。问题是：如果有超过 1 条评论，所有评论将一起显示，在彼此之上，并向上滚动 3 秒。

我的问题是，如何让评论一条一条向上滚动？

编辑：我听取了 algo_user 的建议，将 .scroll-up p 位置更改为相对位置。但现在它显示所有评论，向上滚动 3 秒并重复。对于所有 10 条评论，3 秒只显示前 4 或 5 条。我的新问题是，有些帖子可能有 1 条评论，有些可能有 10 条评论，我如何以相同的速度滚动所有评论？

Answer 1

根据 w3 学校：位置：绝对；-> 该元素相对于其第一个定位（非静态）祖先元素定位因此，如果您将“.scroll-up p”的位置属性更改为 initial/relative 或什至只是删除它，那么这应该可以工作。您可以在此处阅读有关此属性的更多信息：https ://www.w3schools.com/cssref/pr_class_position.asp