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 作为子组件接收新的道具

元素值在使用 react-transition-group 进行转换之前移动和更改

react-transition-group动画以及数字滚动效果实现

react-transition-group CSSTransition 在渲染时滑入