问题描述
'费用'和'收入'是初始值为0的两个状态。 当费用金额大于收入金额时,需要用脉冲动画突出显示费用容器金额。 我尝试通过检查费用金额值是否大于收入金额的条件动态更改类,并且动画根本没有任何错误。
收入 - +价值 费用--价值
IncomeExpense.js *Here I have changed the class dynamically*
import React from "react";
import "./App.css";
const IncomeExpense = ({ expense,income }) => {
return (
<div className="income-expense-container">
<div className="income-info">
<h3>INCOME</h3>
<h2 className="income-field">₹{income}</h2>
</div>
<div className="expense-info">
<h3>EXPENSE</h3>
<h2
className={`expense-field ${
Number(expense) > Number(income) ? "-pulse" : ""
}`}> ₹{expense * -1} </h2>
</div>
</div>
);
};
export default IncomeExpense;
App.css *css pulse animation code*
.expense-field {
margin-top: 2px;
color: #c00000;
}
.expense-field-pulse {
margin-top: 2px;
color: #c00000;
animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #c00000,0 0 20px #fff,0 0 30px #c00000,0 0 40px #c00000,0 0 50px #c00000,0 0 60px #c00000,0 0 70px #c00000;
}
to {
text-shadow: 0 0 20px #c00000,0 0 70px #c00000,0 0 80px #c00000;
}
}
解决方法
因为在你的结构中,费用永远不会大于收入,而且你需要删除费用字段后面的空格,这段代码会起作用:
className={`expense-field${(expense * -1) > income ? "-pulse" : ""}`}