Удаление элемента с применением анимации

<div id="content"></div>

<style type="text/css">
  .message {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  }
   
  .messageAction {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  }
   
  .messageContainer {
  background-color: white;
  border-bottom: 1px solid #eceeef;
  border-top: 1px solid #eceeef;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: -2px;
  overflow: hidden;
  position: relative;
  }
   
  .messageList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 20px;
  width: 400px;
  }
   
  .messageListActions {
  padding: 20px 0;
  }
   
  .messages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  }
</style>

<script src='https://unpkg.com/react@15.3.2/dist/react.js'></script>
<script src='https://unpkg.com/react-dom@15.3.2/dist/react-dom.js'></script>
<script src='https://unpkg.com/classnames@2.2.5/index.js'></script>
<script src='https://unpkg.com/immutable@3.8.1/dist/immutable.min.js'></script>
<script src='https://unpkg.com/d3@4.3.0/build/d3.min.js'></script>
<script src='https://unpkg.com/moment@2.17.1/min/moment.min.js'></script>
<script src='https://unpkg.com/bluebird@3.4.7/js/browser/bluebird.min.js'></script>
<script src='https://unpkg.com/axios@0.15.3/dist/axios.min.js'></script>
<script src='https://unpkg.com/react-motion@0.4.7/build/react-motion.js'></script>

<script>
  "use strict";

  function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
  throw new TypeError("Cannot call a class as a function");
  }
  }

  function _possibleConstructorReturn(self, call) {
  if (!self) {
  throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
  }

  function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
  throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
  constructor: {
  value: subClass,
  enumerable: false,
  writable: true,
  configurable: true
  }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  }

  var _ReactMotion = ReactMotion;
  var spring = _ReactMotion.spring;
  var TransitionMotion = _ReactMotion.TransitionMotion;

  var MessageList = function (_React$Component) {
  _inherits(MessageList, _React$Component);

  function MessageList(props) {
  _classCallCheck(this, MessageList);

  var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

  _this.state = {
  messages: props.messages
  };
  return _this;
  }

  MessageList.prototype.render = function render() {
  var _this2 = this;

  var messages = this.state.messages;

  var styles = messages.map(function (message) {
  return {
  key: message,
  style: {
  progress: spring(1)
  },
  data: message
  };
  }).toArray();

  return React.createElement(
  "div", {
  className: "messageList"
  },
  React.createElement(
  TransitionMotion
  // willAppear styles
  // defaultStyles={styles.map(style => ({
  // key: style.key,
  // style: { progress: 0 },
  // }))}
  , {
  styles: styles,
  willEnter: function willEnter() {
  return {
  progress: 0
  };
  },
  willLeave: function willLeave() {
  return {
  progress: spring(0)
  };
  }
  },
  function (styles) {
  return React.createElement(
  "div", {
  className: "messages"
  },
  styles.reverse().map(function (style) {
  return React.createElement(
  "div", {
  className: "messageContainer",
  key: style.key,
  style: {
  height: 50 * style.style.progress,
  opacity: style.style.progress
  }
  },
  React.createElement(
  "div", {
  className: "message"
  },
  React.createElement(
  "div", {
  className: "messageContent"
  },
  style.data
  ),
  React.createElement(
  "button", {
  className: "messageAction btn btn-danger btn-sm",
  onClick: function onClick() {
  _this2.setState({
  messages: messages.filter(function (message) {
  return message !== style.key;
  })
  });
  },
  type: "button"
  },
  "Delete"
  )
  )
  );
  })
  );
  }
  ),
  React.createElement(
  "ul", {
  className: "messageListActions list-inline"
  },
  React.createElement(
  "li", {
  className: "list-inline-item"
  },
  React.createElement(
  "button", {
  className: "btn btn-secondary",
  onClick: function onClick() {
  _this2.setState({
  messages: _this2.props.messages
  });
  },
  type: "button"
  },
  "Reset"
  )
  )
  )
  );
  };

  return MessageList;
  }(React.Component);

  var messages = Immutable.Range(0, 5).map(function (i) {
  return "Message " + i;
  }).toList();

  ReactDOM.render(React.createElement(MessageList, {
  messages: messages
  }), document.getElementById('content'));
  //# sourceURL=pen.js
</script>