Animate

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true };
    this.handleToggle = this.handleToggle.bind(this);
  }
  handleToggle() {
    this.setState({
      visible: !this.state.visible
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle visible</button>
        <Animate
          animation={{
            enter: "my-zoom-in",
            leave: "my-zoom-out"
          }}
        >
          {this.state.visible ? (
            <div className="basic-demo">Next Animate</div>
          ) : null}
        </Animate>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ["hello", "world", "click", "me"] };
  }
  handleAdd() {
    this.setState({
      items: [
        ...this.state.items,
        // eslint-disable-next-line
        prompt("Enter some text")
      ]
    });
  }
  handleRemove(i) {
    const newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({ items: newItems });
  }
  render() {
    return (
      <div className="totolist-container">
        <Animate
          animationAppear
          animation="fade"
          className="todo-list"
          singleMode={false}
          beforeAppear={() => console.log("before appear")}
          onAppear={() => console.log("appear")}
          afterAppear={() => console.log("after appear")}
          beforeEnter={() => console.log("before enter")}
          onEnter={() => console.log("enter")}
          afterEnter={() => console.log("after enter")}
          beforeLeave={() => console.log("before leave")}
          onLeave={() => console.log("leave")}
          afterLeave={() => console.log("after leave")}
        >
          {this.state.items.map((item, i) => (
            <div key={item}>
              {item}
              <button onClick={() => this.handleRemove(i)}>&times;</button>
            </div>
          ))}
        </Animate>
        <button onClick={() => this.handleAdd()}>Add Item</button>
      </div>
    );
  }
}
ReactDOM.render(<TodoList />, mountNode);

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { expand: true };
    [
      "beforeEnter",
      "onEnter",
      "afterEnter",
      "beforeLeave",
      "onLeave",
      "afterLeave",
      "handleToggle"
    ].forEach(method => {
      this[method] = this[method].bind(this);
    });
  }
  handleToggle() {
    this.setState({
      expand: !this.state.expand
    });
  }
  beforeEnter(node) {
    this.height = node.offsetHeight;
    node.style.height = "0px";
  }
  onEnter(node) {
    node.style.height = `${this.height}px`;
  }
  afterEnter(node) {
    this.height = null;
    node.style.height = null;
  }
  beforeLeave(node) {
    node.style.height = `${this.height}px`;
  }
  onLeave(node) {
    node.style.height = "0px";
  }
  afterLeave(node) {
    node.style.height = null;
  }
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle expand</button>
        <Animate
          animation="expand"
          beforeEnter={this.beforeEnter}
          onEnter={this.onEnter}
          afterEnter={this.afterEnter}
          beforeLeave={this.beforeLeave}
          onLeave={this.onLeave}
          afterLeave={this.afterLeave}
        >
          {this.state.expand ? <div className="notice"></div> : null}
        </Animate>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);