css - react-transition-group CSSTransition 滑入渲染

Question

我试图让一个组件在 React 中有条件地呈现并在它呈现时滑动它

包:

"react": "^16.8.6",
"react-transition-group": "^4.0.1",

代码片段:

{ 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 |            |
|      |          |            |
|      |          |            |
|      |          |            |
+------------------------------+

Expanded应该在true时滑入，false时滑出，它是代码片段中的expandedDiv

div 只是弹出而没有动画。预期行为是从左到右的线性过渡

谢谢

Answer 1

我需要多看一点你的代码才能准确理解你想做什么。但如果我做对了，请尝试这样做:

<CSSTransition
  in={expanded}
  appear={true}
  key = {this.props.location.key}
  timeout={500}
  classNames="slide">
            <div className='expandedDiv'> </div>
</CSSTransition>