Анимации в Reactjs

Question

Я новичок в анимации в React и хотел бы анимировать приложение для простых сообщений.

Я хотел бы oop просмотреть все сообщения и отобразить 3 сообщения за раз, когда самый старый пост удаляется из вида, поверх остальных постов вставляется новый. Примерно так -

I'm not sure which library I should be using in order to implement this.

My code so far is very simple -

import React from "react";
import "./App.css";
import title from "./assets/title.png";
import posts from "./posts";
import Post from "./post";

function App() {
  return (
     заглавие {posts.map (post => {return ( ); })} ); } экспортировать приложение по умолчанию; 

Буду признателен за помощь

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 создаст эффект затухания при появлении нового сообщения. Свойство "layout" приведет к тому, что старые элементы, которые останутся, плавно переместятся на свои новые позиции.