Así que tengo este código para obtener los datos de la base de datos como un archivo json y luego recorrer un elemento (portOn) para averiguar qué puerto está en la matriz. Si está en la matriz, entonces el puerto es verdadero.
var portG01,portG02 = false; const getDevices = async () => { const response = await fetch(`${API_URL}`); const json = await response.json(); setData(json); for (let i in json) { Object.values(json[i].portOn.split(",")).forEach((value) => { if (value === "G01") { portG01 = true; } if (value === "G02") { portG02 = true; } }); } };y luego mostrará los datos a cambio de esta manera:
return ( <div className="container"> <div className="devices"> <div id="portG01"></div> <div id="portG02"></div> </div> </div> );Ahora lo que quiero hacer es PARPADEAR cada DIV que sea VERDADERO. ¿Cómo puedo lograr eso con CSS? por ejemplo, si el valor es verdadero, utilice el siguiente CSS:
.blink { animation: blinker 1s linear infinite; } @keyframes blinker { 0% { opacity: 0; } 50% { opacity: 0; } }si no es cierto, siga otra propiedad CSS. Por favor, ¿cuál sería la mejor práctica?
¡Puede agregar el estilo (animación css) al div .blink que necesita parpadear usando javascript!
document.getElementById("blink").style.animation = "animation: blinker 1s linear infinite";
¡Déjame saber si funciona!
Puede almacenar el selector que parpadeará y luego simplemente agregar dinámicamente la clase:
import React, { useEffect, useState } from 'react'; const API_URL = '<your-api-url-here>'; const availableDevices = [ 'G01', 'G02' ]; export default function Component(props) { const [selectors, setSelectors] = useState([]); useEffect(() => { getDevices().then(setSelectors); }, []); async function getDevices() { const response = await fetch(API_URL); const json = await response.json(); const set = new Set(Object .values(json) .map(value => value.portOn.split(',')) .flat() .filter(e => availableDevices.includes(e)) ); return [ ...set ]; } return ( <div className="container"> <div className="devices"> {availableDevices.map(device => (<div key={device} id={`port${device}`} className={selectors.includes(device) ? 'blink' : ''}></div>))} </div> </div> ); }Y, para que la animación sea un poco más fluida, puedes cambiar tu CSS a:
.blink { animation: blinker 2s ease-in infinite; } @keyframes blinker { 0%, 100% { opacity: 100%; } 50% { opacity: 0; } }