使用ReactCSSTransitionGroup实现Modal点击动画遇问题求助

Hey there! Let's dig into why your ReactCSSTransitionGroup isn't firing animations for your Modal, and walk through common fixes plus better modern alternatives.

Since you haven't shared your exact render/CSS code, here are the most likely culprits:

• Missing a Unique key Prop
  ReactCSSTransitionGroup relies on the key prop to detect when components are added or removed. If your Modal doesn't have a unique, changing key when it toggles, the transition won't trigger. Make sure you're passing a key that updates with the modal's visibility:

  <ReactCSSTransitionGroup
    transitionName="modal"
    transitionEnterTimeout={300}
    transitionLeaveTimeout={300}
  >
    {this.state.showModal && <Modal key="modal" />}
  </ReactCSSTransitionGroup>
  

• Mismatched CSS Class Names
  The transitionName value you pass (e.g., modal) must exactly match your CSS class prefixes. Your styles should include these classes with matching transition durations:

  .modal-enter {
    opacity: 0;
    transform: scale(0.9);
  }
  .modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
  }
  .modal-leave {
    opacity: 1;
    transform: scale(1);
  }
  .modal-leave-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 300ms, transform 300ms;
  }
  

  Double-check that your JS timeout values match the CSS transition durations (both 300ms here).
• Wrapping the Wrong Element
  Ensure you're wrapping the conditional Modal component directly inside ReactCSSTransitionGroup—not a parent container that's always rendered. If the outer container stays in the DOM even when the modal is hidden, the transition won't detect the modal's mount/unmount.
• Using an Outdated Package
  The old react-addons-css-transition-group is deprecated. If you're using this legacy package, you should switch to the official, maintained react-transition-group library instead.

ReactCSSTransitionGroup is legacy; the current standard is the react-transition-group library, which is more flexible and easier to debug. Here's how to rewrite your modal animation:

1. Install the package first:

   npm install react-transition-group
   

2. Implement the modal with CSSTransition:

   import { CSSTransition } from 'react-transition-group';
   
   render() {
     const { showModal } = this.state;
     return (
       <div>
         <button onClick={() => this.setState({ showModal: !showModal })}>
           Toggle Modal
         </button>
         <CSSTransition
           in={showModal}
           timeout={300}
           classNames="modal"
           unmountOnExit
         >
           <Modal />
         </CSSTransition>
       </div>
     );
   }
   

3. Your existing CSS (from the earlier example) will work perfectly here. The unmountOnExit prop ensures the Modal is removed from the DOM when hidden, triggering the leave animation automatically.

• If your Modal includes a backdrop, wrap both the backdrop and modal content in a single <div> inside the CSSTransition to animate them together.
• For more complex sequences (like staggered transitions), check out the TransitionGroup component from the same library.

内容的提问来源于stack exchange，提问作者d_oram