Анимировать отображение / скрытие строк таблицы в React - PullRequest
Новая
       13

Анимировать отображение / скрытие строк таблицы в React

0 голосов
/ 24 июня 2018

Я видел примеры ReactTransitionGroup . В этих примерах мы анимируем новые и удаленные строки таблицы списка задач. Анимация, показанная в примере, является анимацией затухания. Как расширить / уменьшить строку таблицы вместо анимации исчезновения?

Код моего компонента: 

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;

Мой 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;
}

Не выполняет анимацию высоты!

1 Ответ

0 голосов
/ 25 июня 2018

Я воспользовался ответом, связанным с .

Обернуть каждое содержимое td в 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>

Стиль div с переходом CSSклассы. 

.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;
}
...