我想在几秒钟后删除className，或者在满足条件时重新触发类动画

Question

目标：当价格发生变化时，我希望价格数字用颜色亮几秒钟。我用toogleClassName来做。

问题：当迭代为UP UP或DOWN DOWN时，元素已经具有该类，并且CSS动画已经运行。

JSX代码：

import React, { useEffect, useState, useRef } from "react";
import styles from "./CoinContainer.module.css";
function usePrevious(data) {
const ref = useRef();
useEffect(() => {
ref.current = data;
}, [data]);
return ref.current;
}
export default function CoinContainer({ coin, price }) {
const [priceUpdated, setPrice] = useState("");
const prevPrice = usePrevious(priceUpdated);
// Update price
useEffect(() => {
setInterval(priceUpdate, 20000);
}, []);
// Apply different flash-color style according to up$ or down$ from prev
const toggleClassName = () => {
return prevPrice > priceUpdated ? styles.redPrice : styles.greenPrice;
};
function priceUpdate() {
return fetch(
`https://api.coingecko.com/api/v3/simple/price?ids=${coin}&vs_currencies=usd`
)
.then((data) => data.json())
.then((result) => {
let key = Object.keys(result);
setPrice(result[key].usd);
});
}
return (
<div className={styles.padding}>
<h2>{coin}</h2>
{/* Here is the problem,i would like to remove the class after a few seconds,or edit the CSS code to retrigger the animation */}
<h3 className={toggleClassName()}>
{priceUpdated ? priceUpdated : price}$
</h3>
</div>
);
}

CSS代码

@keyframes upFadeBetween {
from {
color: green;
}
to {
color: white;
}
}
@keyframes downFadeBetween {
from {
color: red;
}
to {
color: white;
}
}
.redPrice {
animation: downFadeBetween 5s;
color: white;
}
.greenPrice {
animation: upFadeBetween 5s;
color: white;
}

非常感谢您的反馈/帮助！

Answer 1

您可以使用另一个名为reset的变量

const [reset, setReset] = useState(false);

然后使用setTimeout在您的方法中设置此值

const toggleClassName = () => {
setTimeout(() => setReset(true), 6000);
return prevPrice > priceUpdated ? styles.redPrice : styles.greenPrice;
};

function priceUpdate() {
return fetch(
`https://api.coingecko.com/api/v3/simple/price?ids=${coin}&vs_currencies=usd`
)
.then((data) => data.json())
.then((result) => {
let key = Object.keys(result);
setReset(false);
setPrice(result[key].usd);
});
}

最后是

<h3 className={reset ? "" : toggleClassName()}>

Answer 2

您可以执行此

handleClick = event => event.target.classList.add('click-state');

或者由于react是js库，所以它明确地支持js DOM元素，所以毫无疑问，它也使用DOM。所以你也可以这样做，

用于添加类

document.getElementById("id here").classList.add("classname here");

用于删除类别

document.getElementById("id here").classList.remove("classname here");

或

你也可以使用反应状态

Answer 3

您可以使用一个变量，该变量将在每次触发提取时更新。在这种情况下，我们将其称为动画样式

function CoinContainer({ coin, price }) {
const [priceUpdated, setPrice] = useState("")
const [animationStyle, setAnimationStyle] = useState("")
useEffect(() => {
setInterval(priceUpdate, 20000)
}, [])
function updateAnimationStyle(){
if (prevPrice > priceUpdated) {
setAnimationStyle("redPrice")
} else {
setAnimationStyle("greenPrice")
}
setTimeout(() => {
setAnimation("")
}, 5000)
}
function priceUpdate() {
return fetch(
`https://api.coingecko.com/api/v3/simple/price?ids=${coin}&vs_currencies=usd`
)
.then((data) => data.json())
.then((result) => {
let key = Object.keys(result)
setPrice(result[key].usd)
updateAnimationStyle()
})
}
return (
<div className={styles.padding}>
<h2>{coin}</h2>         
<h3 className={animationStyle}>//you avoid doing the conditional rendering that might be a bit confusing
{priceUpdated ? priceUpdated : price}$
</h3>
</div>
)
}

1. 好的，所以基本上，方法是避免在jsx中进行过大的条件渲染
2. 每次触发fetch时都会调用函数updateAnimationStyle
3. 根据具体情况，updateAnimationStyle会将redPrice或greenPrice动画设置为animationStyle
4. animationStyle将在5秒钟后通过setTimeout功能清除"它不能小于5s，因为您已经将动画持续时间设置为5s">
5. const [priceUpdated, setPrice] = useState("")最好避免对变量进行这种类型的命名
6. 相反，如果您使用const [priceUpdated, setPriceUpdated] = useState("")，它将更具可读性

希望它对你有用！当做