react-transition-group CSSTransition 在渲染时滑入
Posted
技术标签:
【中文标题】react-transition-group CSSTransition 在渲染时滑入【英文标题】:react-transition-group CSSTransition slide in on render 【发布时间】:2019-10-11 09:18:44 【问题描述】:我正在尝试在 React 中有条件地渲染一个组件并在它渲染时滑动它
包:
"react": "^16.8.6",
"react-transition-group": "^4.0.1",
代码sn-p:
expanded && (
<CSSTransition in=expanded timeout=500 classNames="slide">
<div className="expandedDiv"></div>
</CSSTransition>
)
css:
.slide-enter
transform: translateX(-100%);
transition: .3s linear;
.slide-enter-active
transform: translateX(0%);
.slide-exit
transform: translateX(0%);
transition: .3s linear;
.slide-exit-active
transform: translateX(-100%);
结构:
+------------------------------+
| | | header |
| | |____________+
| | | content |
| | | |
| | | |
| nav | expanded | |
| | | |
| | | |
| | | |
+------------------------------+
扩展应该在true时滑入,在false时滑出,它是来自代码sn-p的expandedDiv
div 只是在没有动画的情况下弹出。预期行为是从左到右的线性过渡
谢谢
【问题讨论】:
【参考方案1】:我需要多看一点你的代码才能准确理解你想要做什么。但是,如果我做对了,请尝试这样做:
<CSSTransition
in=expanded
appear=true
key = this.props.location.key
timeout=500
classNames="slide">
<div className='expandedDiv'> </div>
</CSSTransition>
【讨论】:
嘿,它没有成功,我已经更新了我的主要帖子,提供了更多信息【参考方案2】: <CSSTransition
in=expanded
timeout=300
classNames="slide"
unmountOnExit
onEnter=() => this.toggleExpanded(true)
onExited=() => this.toggleExpanded(false)
>
<div className="expandedDiv">
</div>
</CSSTransition>
</div>
【讨论】:
以上是关于react-transition-group CSSTransition 在渲染时滑入的主要内容,如果未能解决你的问题,请参考以下文章
react-transition-group 中的退出延迟动画
使用 react-transition-group 作为子组件接收新的道具
元素值在使用 react-transition-group 进行转换之前移动和更改