仅对新元素产生淡化效果答案

【问题标题】：Fade effect ONLY on new elements仅对新元素产生淡化效果
【发布时间】：2020-09-23 23:18:30
【问题描述】：

我正在处理的 UI 中的一些消息上有这个 CSS。

opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.3s;
animation-fill-mode: forwards;


@keyframes fadeIn {
   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }
}

它在新项目中消失。效果很好，除了......当页面加载时它会淡化所有消息。我只希望消息在新消息时淡入。想象一条新消息进入现有列表。

有没有办法调整这个动画在页面加载时不触发？我可能可以用 JS 来装配一些东西，但很好奇是否有一种纯 CSS 方法来做到这一点。

【问题讨论】：

所以您希望已经存储在某处的消息在页面加载时显示而不会褪色，而在页面处于活动状态时弹出的新消息会一一淡入？如果给动态消息添加一个类而不应用于静态消息怎么办？
我可能会加载原始票证，然后使用 JS 在其上添加其他样式。但想知道是否有更简单的方法来做到这一点

标签： css reactjs css-animations

【解决方案1】：

我们必须找到一种方法来告诉 css 哪些是新的，哪些是旧的......也许我们可以在对象中使用一个属性？

js，我们根据状态字段是否为“新”来设置类：

dataSet.map((item, key) => {
        return (
          <div className={item.status === "new" ? "newClass" : "oldClass"}>
            {item.name} - {item.status}
          </div>
        );
      })

样本stackblitz

【讨论】：