React 过渡动画未按预期工作

Question

我在尝试为注册表单设置动画时遇到了 reactJS 问题。动画应该在表单出现时从顶部淡入，然后当用户单击注册时它应该淡出。这是代码

import { TransitionGroup, CSSTransition} from 'react-transition-group';
...
import "./App.css";

class App extends Component {

  state = {
    mounted: false
  }

  constructor(props) {
    super(props);
    this.state = { mounted: false };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  getInitialState() {
    return { mounted: false };
  }

  componentDidMount() {
    this.setState({ mounted: true });
  }

  handleSubmit(e) {
    this.setState({ mounted: false });
    e.preventDefault();
  }

  render() {
    var child;
    if(this.state.mounted) {
        child = (<Modal onSubmit={this.handleSubmit} />);
    } else {
      child = (<div />);
    }

    return (
      <div className="App">
        <TransitionGroup>
          <CSSTransition
            in={this.state.mounted}
            className="example"
            timeout={{ enter: 500, exit: 300}}
          >
          {child}
          </CSSTransition>
        </TransitionGroup>
      </div>
    );
  }
}

export default App;

这是 CSS App.css：

.example-enter {
  margin-top: 30px;
  opacity: .01;
}
.example-enter.example-enter-active {
  margin-top: 0px;
  opacity: 1;
  transition: opacity 1000ms ease, margin .5s ease;
}

.example-exit {
  margin-top: 0px;
  opacity: 1;
}
.example-exit.example-exit-active {
  margin-top: -30px;
  opacity: .01;
  transition: opacity .3s ease, margin .5s ease;
}

谁能指出问题出在哪里。谢谢

Answer 1

我在“react-transition-group”文档中发现 CSSTransition 元素具有名为“classNames”的属性，也许你会有机会