React动态组件动画实现及animated fadeIn单次动画问题排查

Hey there! Let's tackle why your React component's animated fadeIn animation only fires once—this is a super common gotcha, and I’ve fixed this exact issue a bunch of times. Let’s break down the root causes and walk through solutions that work.

The Core Problem #

React doesn’t re-run mount-based animations unless the component is unmounted and re-mounted, or you explicitly reset the animation state. When you add animated fadeIn on component mount, the CSS animation runs once, but if the component stays in the DOM (even if its content changes), the browser won’t re-trigger the animation automatically.

Solution 1: Force Re-Mount with the key Prop #

React uses the key prop to identify unique components. If you update the key whenever you want the animation to fire, React will unmount the old component instance and mount a new one—triggering the fade-in animation again.

Here’s how to adjust your component with react-animated-css:

import React, { Component } from 'react';
import Img from 'react-image';
import { Animated } from "react-animated-css";

const spinner = (
  <div className="sk-fading-circle">
    <div className="sk-circle1 sk-circle"></div>
    {/* ... rest of your spinner code ... */}
  </div>
);

class YourComponent extends Component {
  state = {
    animationKey: 0, // Tracks when to re-mount the component
  };

  // Call this method whenever you need to trigger the animation
  triggerFadeIn = () => {
    this.setState(prevState => ({
      animationKey: prevState.animationKey + 1,
    }));
  };

  render() {
    return (
      <Animated
        key={this.state.animationKey} // Critical: changes to re-mount
        animationIn="fadeIn"
        animationOut="fadeOut"
        isVisible={true}
        duration={500} // Adjust timing as needed
      >
        <Img src="your-image-source" loader={spinner} />
      </Animated>
    );
  }
}

export default YourComponent;

Every time animationKey increments, React treats the <Animated> component as new, so the fadeIn animation runs from scratch.

Solution 2: Manually Reset the CSS Animation #

If you don’t want to re-mount the component, you can manually toggle the animation classes and force a browser re-paint to re-trigger the animation.

import React, { Component, createRef } from 'react';
import Img from 'react-image';

const spinner = (
  <div className="sk-fading-circle">
    <div className="sk-circle1 sk-circle"></div>
    {/* ... rest of your spinner code ... */}
  </div>
);

class YourComponent extends Component {
  componentRef = createRef();

  triggerFadeIn = () => {
    const element = this.componentRef.current;
    if (!element) return;

    // Remove animation classes to reset
    element.classList.remove('animated', 'fadeIn');
    // Force browser to re-calculate layout (triggers re-paint)
    void element.offsetWidth;
    // Re-add classes to fire the animation
    element.classList.add('animated', 'fadeIn');
  };

  render() {
    return (
      <div ref={this.componentRef} className="animated fadeIn">
        <Img src="your-image-source" loader={spinner} />
      </div>
    );
  }
}

export default YourComponent;

The void element.offsetWidth line is key—it tricks the browser into re-rendering the element immediately, so when you re-add the animation classes, it behaves like a fresh mount.

Solution 3: Fix ReactCSSTransitionGroup Usage #

If you’re using ReactCSSTransitionGroup, make sure you’re properly toggling component visibility and setting transition timings. Here’s a corrected implementation:

First, add these CSS classes:

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

Then update your component:

import React, { Component } from 'react';
import Img from 'react-image';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const spinner = (
  <div className="sk-fading-circle">
    <div className="sk-circle1 sk-circle"></div>
    {/* ... rest of your spinner code ... */}
  </div>
);

class YourComponent extends Component {
  state = {
    showContent: true,
  };

  triggerFadeIn = () => {
    // First hide the component, then show it to trigger enter animation
    this.setState({ showContent: false }, () => {
      setTimeout(() => {
        this.setState({ showContent: true });
      }, 100); // Give time for the component to unmount
    });
  };

  render() {
    return (
      <ReactCSSTransitionGroup
        transitionName="fade"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
      >
        {this.state.showContent && (
          <div key="content"> {/* Key ensures React detects the element change */}
            <Img src="your-image-source" loader={spinner} />
          </div>
        )}
      </ReactCSSTransitionGroup>
    );
  }
}

export default YourComponent;

By toggling showContent off and on, you trigger the leave and enter transitions, which re-runs the fade-in animation.

Quick Notes to Avoid Future Issues #

• For react-animated-css, if you use isVisible, toggle it from false to true to re-trigger the animation (don’t leave it set to true permanently).
• Double-check your CSS: make sure animation-iteration-count isn’t set to infinite unless you want looping, but default is 1 which is fine for one-time triggers.

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