Why doesn't transitionAppear work and why don't animations work at all on the server?

Question

JavaScript

The animation of the wrapper elements works, but for some reason the animation on the wrapper itself does not work.
What could be the problem?
And besides, I don’t understand why on a local server using webpack devServer, animations, although not in full, work, but if you write your server on node.js/express. there is no animation at all. besides, in react dev tools, the ReactCSSTransitionGroup component is not displayed, instead of it the usual section.

import ReactCSSTransitionGroup from "react-addons-css-transition-group";

render() {
  return (
    <main>
      <Header title = { this.props.title } todos = { this.state.todos } />

      <ReactCSSTransitionGroup
        component="section"
        transitionName="slide"
        transitionAppear={ true }
        transitionAppearTimeout={ 500 }
        transitionEnterTimeout={ 500 }
        transitionLeaveTimeout={ 500 }
        className="todo-list">
        { this.state.todos.map(todo => {
          return <Todo
            key = { todo.id }
            id = { todo.id }
            title = { todo.title }
            completed = { todo.completed }
            onDelete = { this.handleDelete }
            onEdit = { this.handleEdit }
            onStatusChange = { this.handleStatusChange } />;
        }) }
      </ReactCSSTransitionGroup>
      <Form onAdd = { this.handleAdd } />
    </main>
  );
}

.slide-enter {
  transform: translateX(-100%);
}

.slide-enter.slide-enter-active {
  transform: translateX(0);
  transition: all .5s;
}

.slide-leave {
  transform: translateX(0);
}

.slide-leave.slide-leave-active {
  transform: translateX(100%);
  transition: all .5s;
}

.slide-appear {
  opacity: 0;
}

.slide-appear.slide-appear-active {
  opacity: 1;
  transition: all .5s;
}