es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obtener el valor de una regla CSS del módulo CSS.

14 Jul, 2023 Programación

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?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    /* Animations.module.css */
:root {
    --transition-duration: 500ms;
}

    Luego, importa este módulo a tu componente y úsalo para establecer la propiedad transition-duration en la clase animatable:

    /* MyComponent.module.css */
@import './Animations.module.css';

.animatable {
    background-color: red;
    transition-property: background-color;
    transition-duration: var(--transition-duration);
}

.animating {
    background-color: grey;
}

    Finalmente, en el archivo JavaScript de tu componente, puedes acceder a la variable de duración utilizando getComputedStyle():

    // MyComponent.js
import styles from './MyComponent.module.css';
import animations from './Animations.module.css';

const MyComponent = () => {
    const [isAnimating, setIsAnimating] = useState(false);

    const classes = `${styles.animatable} ${isAnimating ? styles.animating : ''}`;

    const clickHandler = () => {
        setIsAnimating(true);

        const duration = parseInt(getComputedStyle(document.documentElement)
            .getPropertyValue('--transition-duration'));

        setTimeout(() => setIsAnimating(false), duration);
    };

    return <div classname="{classes}" onclick="{clickHandler}">Haz clic aquí.</div>;
};

export default MyComponent;

    Aquí, utilizamos getComputedStyle(document.documentElement).getPropertyValue('--transition-duration') para obtener el valor de --transition-duration del CSS y convertirlo a un número entero utilizando parseInt(). Luego, podemos utilizar este valor para establecer la duración de la función setTimeout() 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.

Comments are closed.