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”的位置屬性更改為初始/相對，甚至只是將其刪除，那么應該可以。

您可以在此處閱讀有關此屬性的更多信息： https : //www.w3schools.com/cssref/pr_class_position.asp