我在我的Web应用程序中有一个模态框,我希望当用户单击“打开”按钮时它可以滑入。我正在使用react-transition-group来实现这一点。但是,我无法让动画效果工作。不确定问题出在哪里?
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 {
left: -100%;
transition: left 300ms linear;
}
.dialog-enter-active {
left: 0;
}
.dialog-exit {
left: 0;
transition: left 300ms linear;
}
.dialog-exit-active {
left: -100%;
}
这里 是可行的代码。
CSSTransition
来动画化其不透明度。该盒子是Modal
的直接子元素。但它没有起作用。你能找出原因吗?https://codesandbox.io/s/csstransition-component-z1y2r。谢谢。 - darKnight