我有一个div.modal我想用 CSS转换的组件。初始值设置为w=0和h=0，transition is all, 1s。
此组件是另一个名为 - 的组件中的条件渲染<Starter />，而后者又是<Home />.
我已经在很多地方尝试过这个，但是 DOM 还没有准备好
{ document.getElementsByClassName('modal').style.width = 'auto' }
组件：
const JoinSign = () => {
return (
<div id="overlay">
<div className="modal">
<h2>Join Sign in</h2>
</div>
</div>
);
}
export default JoinSign;
对我来说，最简单的方法就是向 modal 添加一个类并执行 useEffect：
const JoinSign = () => {
const [additionalClass, setAdditionalClass] = useState('')
useEffect(() => {
setTimeout(() => { //not sure it is required but
setAdditionalClass('open')
}, 1);
return () => setAdditionalClass('') //clean up function
}, [])
return (
<div id="overlay">
<div className={`modal ${additionalClass}`}>
<h2>Join Sign in</h2>
</div>
</div>
);
}
export default JoinSign
你在 .modal.open 上用简单的 css 处理动画
您可以width动态地向组件添加属性
const JoinSign = () => {
const [width, setWidth] = useState(20);
return (
<div id="overlay">
<div className="modal" style={{width: width}}>
<h2>Join Sign in</h2>
</div>
</div>
);
}
export default JoinSign;
然后使用更改宽度
setWidth(50);
或者当组件安装时
const JoinSign = () => {
const [width, setWidth] = useState(20);
useEffect(() => {
setWidth(50);
});
return (
<div id="overlay">
<div className="modal" style={{width: width}}>
<h2>Join Sign in</h2>
</div>
</div>
);
}
export default JoinSign;