Почему не срабатывает transitionAppear и почему анимации вообще не работают на сервере?

Question

[gleendo]

Анимация элементов обертки работает, но почему то не срабатывает анимация на самой обертке.
В чем может быть проблема?
И к тому же не пойму почему на локальном сервере используя webpack devServer, анимации хоть и не в полном объеме работает, а вот если написать свой сервер на node.js/express. то анимации вообще нет. к тому же в react dev tools, компонент ReactCSSTransitionGroup не отображается, вместо него обычный 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;
}