React CSSTransition not animating

Question

我想在我的 Web 应用程序中对一个框(淡入、淡出(进行动画处理。我为此使用反应过渡组。但不知何故，动画不起作用。法典

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Modal from 'react-modal';
import './styles.css';
class Example extends React.Component {
state = {
isOpen: false,
};
toggleModal = () => {
this.setState(prevState => ({
isOpen: !prevState.isOpen,
}));
};
render() {
const modalStyles = {
overlay: {
backgroundColor: '#ffffff',
},
};
return (
<div>
<button onClick={this.toggleModal}>
Open Modal
</button>
<CSSTransition
in={this.state.isOpen}
timeout={300}
classNames="dialog"
>
<Modal
isOpen={this.state.isOpen}
style={modalStyles}
>
<button onClick={this.toggleModal}>
Close Modal
</button>
<div>Hello World</div>
</Modal>
</CSSTransition>
</div>
);
}
}

.CSS：

.dialog-enter {
opacity: 0;
transition: opacity 500ms linear;
}
.dialog-enter-active {
opacity: 1;
}
.dialog-exit {
opacity: 0;
}
.dialog-exit-active {
opacity: 1;
}
.box {
width: 200px;
height: 100vh;
background: blue;
color: white;
}

这是工作代码。单击"打开模态"以打开模态，然后单击"切换框"以打开/关闭我要制作动画的框。

编辑：我实际上正在尝试在切换时让盒子滑入和滑出。这是

更新后的 CSS：

.dialog-enter {
left: 100%;
transition: left 1500ms;
}
.dialog-enter-active {
left: 0;
}
.dialog-exit {
left: 0;
transition: left 1500ms;
}
.dialog-exit-active {
left: 100%;
}
.box {
position: absolute;
width: 200px;
height: 50vh;
background: blue;

更新的代码链接

Answer 1

您必须完全信任 CSSTransition 的挂载/卸载。

<CSSTransition
in={this.state.boxVisible}
timeout={1500}
classNames="dialog"
unmountOnExit
>
<div>
<div className="box">Box</div>
</div>
</CSSTransition>

看这里： https://codesandbox.io/s/csstransition-component-9obbb

更新：如果您想按照评论中的要求移动带有左侧 css 属性的元素。您还必须添加位置：现实风格。

.dialog-enter {
left: 100%;
transition: left 1500ms;
position: relative;
}
.dialog-enter-active {
left: 0;
}
.dialog-exit {
left: 0;
transition: left 1500ms;
position: relative;
}
.dialog-exit-active {
left: 100%;
}