CODEWITHSUNDEEP
javascripthtmlcssreactjs
Jimmy
Jimmy

Reputation: 3860

Adding css transitions to a growing list of items

I have a component that starts out with an empty list of items / boxes and as the list grows, the previous items are pushed down in the que. You can see the below snippet for an example. How do I add css transitions such that you can visually see the items move from their previous position to the next position down? Thanks!

class App extends React.Component {
    constructor() {
    super();
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
    this.getItems = this.getItems.bind(this);
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1,
    });
  }
  
  getItems() {
    let items = [];
    for (let j = 0; j < this.state.count; j++) {
      items.push(<div className="item">This is a box {j}</div>)
    }
    return items.reverse();
  };

  render() {
    return (
      <div className="container">
        <button onClick={this.handleClick}>Add box</button>
        {this.getItems()}
      </div>
    );
  }
}



ReactDOM.render(<App />, app);
.container {
  border: 1px solid green !important;
}


.item {
  height: 40px;
  width: 100px;
  background: yellow;
  border: 2px solid red;
  margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 0

Views: 442

Answers (1)

Arthur
Arthur

Reputation: 5148

You can use animation on max-height; But you have to know the size of your .item, max-height:100% isn't working on animation.

class App extends React.Component {
    constructor() {
    super();
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
    this.getItems = this.getItems.bind(this);
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1,
    });
  }
  
  getItems() {
    let items = [];
    for (let j = 0; j < this.state.count; j++) {
      items.push(<div className="item">This is a box {j}</div>)
    }
    return items.reverse();
  };

  render() {
    return (
      <div className="container">
        <button onClick={this.handleClick}>Add box</button>
        {this.getItems()}
      </div>
    );
  }
}



ReactDOM.render(<App />, app);
.container {
  border: 1px solid green !important;
}


.item {
  height: 40px;
  width: 100px;
  background: yellow;
  border: 2px solid red;
  margin: 20px;

  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: 1;
  overflow: hidden;
}
@keyframes example {
  from { max-height: 0px;}
  to { max-height: 40px;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions