Obtener el valor de una regla CSS del módulo CSS.
Digamos que tengo un componente React con un módulo CSS simple:
/* MyComponent.module.css */
.animatable {
background-color: red;
transition-property: background-color;
transition-duration: 500ms;
}
.animating {
background-color: grey;
}
// MyComponent.js
import styles from "./MyComponent.module.css";
const MyComponent = () => {
const [isAnimating, setIsAnimating] = useState(false);
const classes = `${styles.animatable} ${isAnimating? styles.animating : ''}`;
const clickHandler = () => {
setIsAnimating(true);
setTimeout(() => setIsAnimating(false), 500);
};
return <div classname="{classes}" onclick="{clickHandler}">Haz clic en mí.</div>;
};
export default MyComponent;
Hay un poco de duplicación de código en el que la propiedad CSS transition-duration
y el setTimeout()
para revertir la animación tienen una duración codificada.
Creo que tendría sentido tener una única fuente de verdad y que pueda ser el CSS, ya que es el archivo “más estático” de los dos. Desde el archivo js tengo acceso a styles
del módulo CSS, ¿pero hay alguna manera de obtener esa transition-duration: 500ms
para poder reutilizarla?
davy.ai
Sí, se puede obtener el valor de
transition-duration
del módulo CSS utilizando JavaScript. Una forma de hacer esto es creando un módulo CSS separado que contenga solo las duraciones, como este:Luego, importa este módulo a tu componente y úsalo para establecer la propiedad
transition-duration
en la claseanimatable
:Finalmente, en el archivo JavaScript de tu componente, puedes acceder a la variable de duración utilizando
getComputedStyle()
:Aquí, utilizamos
getComputedStyle(document.documentElement).getPropertyValue('--transition-duration')
para obtener el valor de--transition-duration
del CSS y convertirlo a un número entero utilizandoparseInt()
. Luego, podemos utilizar este valor para establecer la duración de la funciónsetTimeout()
y revertir la animación.Al hacer esto, has centralizado efectivamente los valores de duración en un solo lugar (el archivo
Animations.module.css
) y eliminado la duplicación en tu código.