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 的装载/卸载。&nbsp; <CSSTransition&nbsp; &nbsp; in={this.state.boxVisible}&nbsp; &nbsp; timeout={1500}&nbsp; &nbsp; classNames="dialog"&nbsp; &nbsp; unmountOnExit&nbsp; >&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <div className="box">Box</div>&nbsp; &nbsp; </div>&nbsp; </CSSTransition>见这里：https : //codesandbox.io/s/csstransition-component-9obbb更新： 如果您想按照评论中的要求移动具有 left css 属性的元素。您还必须向它添加 position: realative 样式。.dialog-enter {&nbsp; left: 100%;&nbsp; transition: left 1500ms;&nbsp; position: relative;}.dialog-enter-active {&nbsp; left: 0;}.dialog-exit {&nbsp; left: 0;&nbsp; transition: left 1500ms;&nbsp; position: relative;}.dialog-exit-active {&nbsp; left: 100%;}