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”的属性，也许你会有机会

React Transition Animation未按预期工作

1 个答案: