javascript - 每次在 React 中创建元素时,我都找不到在元素上进行 CSS 转换的方法
问题描述
每次在 React 中创建元素时,我都找不到一种方法来获取元素的 css 转换。我在 React 中创建了一个包含少量组件和上下文的简单应用程序。我想在创建的每个“项目”组件上转换不透明度。但我不知道如何。每次单击“项目”组件时,我都会设法更改课程,但每次创建课程时我都希望进行过渡。我应该在某处使用 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;
解决方案
您可以使用不重复的关键帧动画。当元素出现时,会触发此动画。
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>
推荐阅读
- flutter - I get null value in future
- reactjs - keen-slider does not work on next.js well
- google-cloud-platform - 无法创建 AI Platform Notebook
- c# - 如何创建一个循环以将数组元素插入一行代码 C#
- flutter - 在 Flutter 中,为什么我们需要在 StatefulWidgets() 中使用 createState()?
- python - 在 Django 中导入 Sentry_sdk 失败
- mongodb - 如何使用 $where 查询 AWS DocumentDB (DocDB) 以比较两个字段
- opencv4android - 如何使用opencv在android中截屏?
- django - 如何将类添加到自动生成的表单标签标签?
- javascript - 如何使用 chrome devtools 之类的 node-fetch 访问请求/响应 cookie?