Animate the show / hide of table rows in React

Question

I have seen the examples of ReactTransitionGroup. In those examples, we are animating new and deleted table rows of a todo list. The animation shown in the example is a fade animation. How do I expand / shrink the table row instead of fade animation?

My component code:

import React, { Component } from 'react';
import './App.css';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import CSSTransition from 'react-transition-group/CSSTransition';

class App extends Component {
  state = { name: '', names: [] };

  handleNameChange(e) {
    this.setState({ name: e.target.value });
  }

  handleSubmit() {
    let { names } = this.state;
    names = names.slice();
    names.push(this.state.name);
    this.setState({ names });
  }

  handleDelete(index) {
    let { names } = this.state;
    names = names.slice();
    names.splice(index, 1);
    this.setState({ names });
  }

  render() {
    return (
      <div className="app">
        <input type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleNameChange.bind(this)} />
        <button onClick={this.handleSubmit.bind(this)}>Submit</button>
        <table border="1" style={{ marginTop: 20 }}>
          <thead>
            <tr>
              <th width="300">Name</th>
              <th width="100">Delete</th>
            </tr>
          </thead>
          <TransitionGroup component="tbody">
            {this.state.names.map((name, index) => (
              <CSSTransition
                key={index}
                timeout={5000}
                classNames="fade"
              >
                <tr>
                  <td>{name}</td>
                  <td>
                    <button onClick={this.handleDelete.bind(this, index)}>Delete</button>
                  </td>
                </tr>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </table>
      </div>
    );
  }
}

export default App;

My CSS:

.fade-enter {
  max-height: 0;
}

.fade-enter-active {
  max-height: 40px;
  transition: all 5000ms ease-in;
}
.fade-exit {
  max-height: 40px;
}
.fade-exit-active {
  max-height: 0;
  transition: all 5000ms ease-in;
}

It does not do any height animation!

Answer 1

I took the help of a related answer.

Wrap each of the td content within a div.

<TransitionGroup component="tbody">
  {this.state.names.map((name, index) => (
    <CSSTransition
      key={index}
      timeout={500}
      classNames="fade"
    >
      <tr>
        <td><div>{name}</div></td>
        <td>
          <div><button onClick={this.handleDelete.bind(this, index)}>Delete</button></div>
        </td>
      </tr>
    </CSSTransition>
  ))}
</TransitionGroup>

Style the div with the CSS Transition classes.

.fade-enter div {
  overflow-y: hidden;
  max-height: 0;
}

.fade-enter-active div {
  max-height: 50px;
  transition: all 500ms ease-in;
}
.fade-exit div {
  max-height: 50px;
}
.fade-exit-active div {
  max-height: 0;
  overflow-y: hidden;
  transition: all 500ms ease-in;
}