React CSSTransition 没有动画

Question

我想在我的 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 {  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;}这是工作代码。单击“打开模态”打开模态，然后单击“切换框”打开/关闭我想要动画的框。

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

更新： 如果您想按照评论中的要求移动具有 left css 属性的元素。您还必须向它添加 position: realative 样式。

.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%;

}