请看一下这个沙箱:
想要的效果:
点击按钮后,从左向右展开,出现黄色框。它看起来像一个宽度从 0 增长到 100 像素的动画。
内部蓝色框不会被渲染直到其父黄色框完全展开(宽度 = 100px)。
我知道我可以让元素始终挂载,将其初始
width
设置为0,并使用transition
来实现此效果,但它会导致一些其他问题,所以我想知道是否可以通过条件渲染来做到这一点。
提前致谢!
以上可以通过使用多个状态变量来管理。 您还需要两个状态变量:
onTransitionEnd
。这将有助于仅在转换结束后显示子组件。
主要组件如下所示:
export function App(props) {
let [isOpen, setIsOpen] = useState(false);
const [transition,setTransition] = useState(false);
const [showChild,setShowChild] = useState(false);
function handleClick() {
setIsOpen(!isOpen)
setShowChild(false);
}
useEffect(() => {
if(isOpen){
setTransition(true);
}
else{
setTransition(false);
}
},[isOpen]);
return (
<>
{
isOpen &&
<div className={`parent ${transition ? 'slide' : 'noSlide'}`} onTransitionEnd={() => {
setShowChild(true);
}}>
{showChild && <div className='child'></div>}
</div>
}
<button onClick={handleClick}>Click me to display the div</button>
</>
);
}
您可以添加这个微小的 CSS 以获得所需的效果:
.parent {
background-color: yellow;
width: 0px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parent.slide{
width :100px;
transition : width 1s ease-in;
}
有条件地,代码添加一个类
slide
并且该类具有所需的转换。
这是一个简单的演示