为什么 CSS 脉冲动画无法正常工作？

Question

'expense'和'income'是两个初始值为0的状态。当费用金额大于收入金额时，需要用脉冲动画突出显示费用容器金额。我尝试动态更改 class，条件是检查费用金额值是否大于收入金额，但动画根本没有错误。

收入-+价值费用 - -值

         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 30px #c00000, 0 0 40px #c00000,
   0 0 50px #c00000, 0 0 60px #c00000, 0 0 70px #c00000, 0 0 80px #c00000;
   }
  }

Answer 1

因为在您的结构中，费用永远不会大于收入，您还需要删除费用字段后的 space，此代码将起作用：

className={`expense-field${(expense * -1) > income ? "-pulse" : ""}`}

为什么 CSS 脉冲动画无法正常工作？

Why CSS pulse animation is not working without any errors?

css

animation

jsx

reactjs

conditional-rendering