React.js中的动画

Question

我是React动画的新手，想为一个简单的帖子应用制作动画。

我想循环浏览所有帖子，并在从视图中删除最旧的帖子的同时渲染3个帖子，在其余帖子的顶部插入一个新帖子。 像这样-

我不确定应该使用哪个库来实现此目的。

到目前为止，我的代码非常简单-

list_type

非常感谢您的帮助

Answer 1

就像已经提到的评论一样，Framer Motion使这种事情变得非常简单。

我在Codesandbox中创建了一个小示例：https://codesandbox.io/s/pedantic-glitter-732dc?file=/src/App.js

在示例中，我在帖子周围使用了motion.div元素：

      <motion.div
        initial={{ opacity: 0 }}
        animate={{
          opacity: 1,
          transition: { type: "tween", delay: 1, duration: 1 }
        }}
        transition={{ type: "tween", duration: 1 }}
        layout
        key={post.id}
      >
        <Post background={post.color} />
      </motion.div>

输入新帖子时，initial和animate属性将创建淡入淡出效果。 “布局”道具会导致保持平稳的旧元素转移到新位置。