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

Question

我找不到一种方法，每次在 React 中创建元素时，它都会得到一个 css 过渡。我在 React 中创建了一个简单的应用程序，其中包含很少的组件和上下文。我希望在创建的每个“项目”组件上转换不透明度。但我不知道怎么回事。每次单击“项目”组件时，我都会设法更改类，但每次创建一个组件时，我都希望有一个过渡。我应该在某个地方使用setTimeOut吗？我应该使用使用Effect吗？

这是我的代码：

// This is my Context

import 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 = () => {&nbsp; const box = document.createElement('div')&nbsp; box.className = 'box'&nbsp; document.body.append(box)}@keyframes appear {&nbsp; from {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform-origin: left;&nbsp; &nbsp; transform: scale(0);&nbsp; }}.box {&nbsp; animation: appear .5s ease-in-out;&nbsp; transition: all .5s ease-in-out;}body {&nbsp; background: slategray;&nbsp; display: flex;&nbsp; flex-wrap: wrap;}button,.box {&nbsp; background: pink;&nbsp; width: 3rem;&nbsp; height: 3rem;&nbsp; margin-left: 0.4rem;&nbsp; margin-bottom: 0.4rem;}button {&nbsp; background: aliceblue;}<button class="add-box">+</button>