Я не могу найти способ получать переход css для элемента каждый раз, когда он создается в React. - PullRequest
Новая
       2

Я не могу найти способ получать переход css для элемента каждый раз, когда он создается в React.

0 голосов
/ 07 мая 2020

Я не могу найти способ получать переход css для элемента каждый раз, когда он создается в React. Я создал простое приложение с несколькими компонентами и контекстом в React. Я бы хотел, чтобы для каждого создаваемого компонента "Project" был установлен переход непрозрачности ... Но я не могу понять, как это сделать. Мне удается менять класс каждый раз, когда я нажимаю на компонент «Проект», но мне бы хотелось переходить каждый раз, когда я его создаю. Стоит ли где-нибудь использовать setTimeOut? Следует ли мне использовать useEffect? ​​

Вот мой код: 

// 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>
  );
};

// Это мой компонент ProjectList 

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;

1 Ответ

1 голос
/ 08 мая 2020

Вы можете использовать анимацию по ключевым кадрам, которая не повторяется. Когда появляется элемент, запускается эта анимация. 

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>
...