enlace codeSandbox

" gastos " e " ingresos " son dos estados con un valor inicial de 0. El monto del contenedor de gastos debe resaltarse con animación de pulso cuando el monto del gasto es mayor que el monto del ingreso. Intenté cambiar la clase dinámicamente con la condición que verifica el valor del monto del gasto si es mayor que el monto del ingreso o no, y la animación no funcionó sin ningún error.

Ingresos - + valor gasto - -valor

App UI

         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;
   }
  }
0
vinender singh 13 mar. 2021 a las 15:14

1 respuesta

La mejor respuesta

Debido a que en su estructura, los gastos nunca superan los ingresos, también debe eliminar el espacio después del campo de gastos, este código funcionará:

className={`expense-field${(expense * -1) > income ? "-pulse" : ""}`}
1
Co Pham 14 mar. 2021 a las 07:18