我找不到一种方法来每次在 React 中创建元素时都获得一个 css 过渡

Question

我找不到一种方法，每次在 React 中创建元素时，它都会得到一个 css 过渡。我在 React 中创建了一个简单的应用程序，其中包含很少的组件和上下文。我希望在创建的每个“项目”组件上转换不透明度。但我不知道怎么回事。每次单击“项目”组件时，我都会设法更改类，但每次创建一个组件时，我都希望有一个过渡。我应该在某个地方使用setTimeOut吗？我应该使用使用Effect吗？这是我的代码：// This is my Contextimport React, { createContext, useState, useEffect } from "react";export const Context = createContext();export const ContextProvider = (props) => {  const [currentProjects, setCurrentProjects] = useState(() => {    const localData = localStorage.getItem("currentProjects");    return localData ? JSON.parse(localData) : [];  });  useEffect(() => {    localStorage.setItem("currentProjects", JSON.stringify(currentProjects));    console.log("currentProjects got updated");  }, [currentProjects]);  return (    <Context.Provider value={[currentProjects, setCurrentProjects]}>      {props.children}    </Context.Provider>  );};这是我的项目列表组件import React, { useContext, useEffect } from "react";import Project from "./Project.js";import { Context } from "./Context.js";import "./ProjectList.css";const ProjectList = () => {  const [currentProjects, setCurrentProjects] = useContext(Context);  return (    <div className="ProjectListContainer">      {currentProjects.map((item) => {        return (          <Project            artist={item.artist}            project={item.project}            label={item.label}          />        );      })}    </div>  );};export default ProjectList;这是我的项目组件import React, { useContext, useEffect, useState, Component } from "react";import "./Project.css";const Project = ({ artist, project, label, light }) => {  //   const [status, setStatus] = useState({ clicked: false });  //   const divGotCliked = (e) => {  //     setStatus({ clicked: !status.clicked });  //   };  return (    <div className="ProjectContainer">      <div className="container1">        <div>          <h2>{artist} </h2>          <h2>{project} </h2>          <h2>{label} </h2>        </div>      </div>    </div>  );};export default Project;

Answer 1

您可以使用不重复的关键帧动画。当元素出现时，将触发此动画。

document.querySelector('.add-box').onclick = () => {

  const box = document.createElement('div')

  box.className = 'box'

  document.body.append(box)

}

@keyframes appear {

  from {

    opacity: 0;

    transform-origin: left;

    transform: scale(0);

  }

}

.box {

  animation: appear .5s ease-in-out;

  transition: all .5s ease-in-out;

}

body {

  background: slategray;

  display: flex;

  flex-wrap: wrap;

}

button,

.box {

  background: pink;

  width: 3rem;

  height: 3rem;

  margin-left: 0.4rem;

  margin-bottom: 0.4rem;

}

button {

  background: aliceblue;

}

<button class="add-box">+</button>