CST-переходы группы реагирования-перехода на рендере - PullRequest
Новая
       26

CST-переходы группы реагирования-перехода на рендере

0 голосов
/ 24 мая 2019

Я пытаюсь сделать условный рендеринг компонента в 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 |            |
|      |          |            |
|      |          |            |
|      |          |            |
+------------------------------+

Расширенное значение должно выдвигаться на true, а выдвигаться на false, это expandedDiv из фрагмента кода

Div просто появляется без анимации. Ожидаемое поведение - линейный переход слева направо

Спасибо

Ответы [ 2 ]

0 голосов
/ 27 мая 2019 
               <CSSTransition
                    in={expanded}
                    timeout={300}
                    classNames="slide"
                    unmountOnExit
                    onEnter={() => this.toggleExpanded(true)}
                    onExited={() => this.toggleExpanded(false)}
                >
                    <div className="expandedDiv">
                    </div>
                </CSSTransition>
            </div>
0 голосов
/ 24 мая 2019

Мне нужно увидеть немного больше вашего кода, чтобы точно понять, что вы пытаетесь сделать. Но если я правильно понял, попробуйте сделать это так: 

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