从CSS模块获取CSS规则的值

Question

假设我有一个React组件，它有一个简单的CSS模块：

/* 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}>Click me.</div>
}
export default MyComponent

有一点代码重复，那就是CSStransition-duration和setTimeout()都恢复了动画的硬编码持续时间。

我认为有一个单一的真相来源是有意义的，它可以是CSS，因为它是"；最静态的"；两个文件中的一个。从js文件中，我可以从CSS模块访问styles，但有没有办法获取transition-duration: 500ms以便重用它？

Answer 1

一个选项是侦听transitionend事件，而不是使用setTimeout:

const MyComponent = () => {
const [isAnimating, setIsAnimating] = useState(false)
const ref = useRef()
const classes = `animatable ${isAnimating ? 'animating' : ''}`
const clickHandler = () => {
setIsAnimating(true)
}
useEffect(() => {
if (!isAnimating) return
const transitionendHandler = () => {
setIsAnimating(false)
}
ref.current.addEventListener('transitionend', transitionendHandler)
return () => {
ref.current.removeEventListener('transitionend', transitionendHandler)
}
}, [isAnimating])
return (
<div
ref={ref}
className={classes}
onClick={clickHandler}
>
Click me.
</div>
)
}