1

I am trying the sample code for React Animation:

  1. https://reactjs.org/docs/animation.html
  2. https://github.com/reactjs/react-transition-group/tree/v1-stable

Demo:

https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js

        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </CSSTransitionGroup>

It doesn't think App exists in index.js. But if the CSSTransitionGroup is replaced by some static text, then it works (without any animation effect):

https://codesandbox.io/s/blue-dust-j0y57?file=/src/App.js

The same with ReactCSSTransitionGroup:
https://codesandbox.io/s/quizzical-franklin-j2hhp?file=/src/App.js

How can it work?

kla
  • 63
  • 1
  • 8

2 Answers2

2

You should use TransitionGroup and CSSTransition instead of ReactCSSTransitionGroup and CSSTransitionGroup . The code looks like below

import React from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ["hello", "world", "click", "me"] };
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([prompt("Enter some text")]);
    this.setState({ items: newItems });
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({ items: newItems });
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <CSSTransition
        key={i}
        classNames="example"
        timeout={{ enter: 500, exit: 300 }}
      >
        <div key={item} onClick={() => this.handleRemove(i)}>
          {item}
        </div>
      </CSSTransition>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <TransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </TransitionGroup>
      </div>
    );
  }
}

export default App;

styles.css

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-exit {
  opacity: 1;
}
.example-exit.example-exit-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

you can see here in codesandbox, check this doc for more information about migration from v1 to v2

iamhuynq
  • 5,357
  • 1
  • 13
  • 36
  • You said "You should use TransitionGroup and CSSTransition instead of ReactCSSTransitionGroup and CSSTransitionGroup", but why is that? Isn't that how it is done in the sample code? Somehow I feel it is the new era of programming: do this and it will work, but why and how -- don't know... – kla Apr 20 '21 at 12:10
  • The docs is saying "CSSTransitionGroup is a high-level API based on TransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM" and you are saying don't use CSSTransitionGroup but use TransitionGroup – kla Apr 20 '21 at 16:22
  • did you notice if you click on the second or third word to delete it, the fade out word is the last one? – kla Apr 20 '21 at 20:33
1

A quick answer: React's official animation docs as of 2021 April points to the v1 documentation, but if we try the solution there with the current react-transition-group, then it would not work. The reason is that from v2 forward, to the current v4 release, it is not backward compatible with v1.

Therefore, if we are using it or exploring to use it, go to the docs and immediately skip any info that is related to v1.

kla
  • 63
  • 1
  • 8