问题描述
我的目标很简单,当组件被加载时,我想要:
- 一个成长的div
- 那个 div 中的文本淡入
不断增长的 div 很容易
<Csstransition
in={onLoad}
timeout={300}
classNames="grow"
unmountOnExit
>
<div className={"success-container"}></>
</Csstransition>
使用 CSS
.success-container {
background: lightblue;
width: 400px;
height: 100px;
transition: height 200ms,width 200ms;
}
.grow-enter {
height: 50px;
width: 100px;
}
淡入也很容易
<Csstransition
in={onLoad}
timeout={300}
classNames="fade"
unmountOnExit
>
<div className={"text-container"}>Here is some fading Text</>
</Csstransition>
使用 CSS
.text-container {
width: 100%;
height: 100%;
transition: opacity 200ms;
}
.fade-enter {
opacity: 0;
}
现在当我将第二个过渡放在第一个内部时,淡入不再发生,我不知道如何进行
这是我在代码沙盒中制作的最小示例
https://codesandbox.io/s/wonderful-fermi-gsz11?file=/src/styles.css
有没有办法让这个工作?或其他方式获得相同的效果(最好没有额外的依赖)?
解决方法
没关系,想通了。您不能与其父级同时触发嵌套过渡,只能在父级渲染后触发。
您可能认为可以使用内置的 OnEntered 回调来执行此操作,但它会引发错误。但是,您可以像这样轻松地使用 useEffect
useEffect(() => {
if (onLoad3===true){
setOnLoad4(true)
} else {
setOnLoad4(false)
}
},[onLoad3]);
这里是完整的工作代码