React: How could I add a fade out animation on delete on dynamically generated table entries?

Question

For several days I have been trying to figure out how to add a fade out animation on dynamically generated table in React, but I had no luck in it yet.

Seems like every approach I try has some limitations to it and does not work in my case: 1) I tried to set it up with refs, but it seems that I cannot dynamically add and correctly store those refs in my React component for a table that has multiple dynamically generated entries. 2) ReactTransitionGroup has its limitations in sense that when I wrap my parent element in TransitionGroup my table design seems to shift away and move everything under the first column. As well as the fade out functionality has not worked for me.

What would be your recommend approach for such task? Is there any library that I could try for this sort of problem?

Best regards, Konstantin

P.S. Here is the link on my source code.

score 2 · Answer 1 · answered Jun 15 '20 at 15:15

There is another react library react-springs which can help you with that.

Easier alternative would be to place style and onTransitionEnd props in tr element and store opacity of rows in state.

const { useState, useEffect } = React;

const App = () => {
  const [rows, setRows] = useState(Array(3).fill(0).map((_, index) => ({
    id: index,
    opacity: 1
  })));

  const onClick = (id) => {
    setRows(rows => {
      const newRows = [...rows];
      const row = newRows.find(row => row.id === id);
      row.opacity = 0;
      
      return newRows
    });
  }
  
  const onTransitionEnd = (id) => {
    console.log(id);
    setRows(rows => rows.filter(pr => pr.id !== id));
  }

  return <div>
      <table>
        <tbody>
          {rows.map(({id, ...styles}) => <tr onTransitionEnd={() => onTransitionEnd(id)} style={styles} key={id}>
            <td>{id + 1}</td>
            <td>{id + 2}</td>
            <td>{id + 3}</td>
            <td className="delete" onClick={() => onClick(id)}><div >Delete</div></td>
          </tr>)}
        </tbody>
      </table>
    </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

table {
  border-collapse: collapse;
}

tr {
  transition: all .5s ease-in;
}

td {
  padding: 10px;
  border: 1px solid lightgray;
}

.delete {
  cursor: pointer;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

score 2 · Answer 2 · answered Jan 17 '21 at 19:56

If you are still looking for an answer you can try modifying "handleDeletion" function similar to below snippet.

function handleDeletion(event) {
    const id = event.currentTarget.value
    const container = event.currentTarget.closest("tr");
    container.style.transition = "all 0.5s";
    container.style.opacity = "0";
    setTimeout(function() {
        setDataset(prevDataset => prevDataset.filter(item => item.id !== parseInt(id)))
        localStorage.removeItem(id)
    }, 700)
}

In this solution table borders wont go away gently. It may look better with css grid or flex.

React: How could I add a fade out animation on delete on dynamically generated table entries?

2 Answers2