Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/react-toastify/lib/DefaultTransition.js

@@ -16,9 +16,9 @@ var _Transition2 = _interopRequireDefault(_Transition);
 
 var _glamor = require('glamor');
 
-var _animation2 = require('./animation');
+var _animation = require('./animation');
 
-var _animation3 = _interopRequireDefault(_animation2);
+var _animation2 = _interopRequireDefault(_animation);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,17 +29,17 @@ var animate = {
   animationFillMode: 'both'
 };
 
-var animation = function animation(pos) {
-  var _getAnimation = (0, _animation3.default)(pos),
+var styles = function styles(pos) {
+  var _getAnimation = (0, _animation2.default)(pos),
       enter = _getAnimation.enter,
       exit = _getAnimation.exit;
 
-  var enterAnimation = _glamor.css.keyframes('enter', _extends({
+  var enterAnimation = _glamor.css.keyframes(_extends({
     'from, 60%, 75%, 90%, to': {
       animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
     }
   }, enter));
-  var exitAnimation = _glamor.css.keyframes('exit', exit);
+  var exitAnimation = _glamor.css.keyframes(exit);
 
   return {
     enter: (0, _glamor.css)(_extends({}, animate, { animationName: enterAnimation })),
@@ -52,23 +52,39 @@ function DefaultTransition(_ref) {
       position = _ref.position,
       props = _objectWithoutProperties(_ref, ['children', 'position']);
 
-  var _animation = animation(position),
-      enter = _animation.enter,
-      exit = _animation.exit;
+  var _styles = styles(position),
+      enter = _styles.enter,
+      exit = _styles.exit;
+
+  var onEnter = function onEnter(node) {
+    return node.classList.add(enter);
+  };
+  var onEntered = function onEntered(node) {
+    return node.classList.remove(enter);
+  };
+  var onExit = function onExit(node) {
+    var height = node.getBoundingClientRect().height;
+    node.style.transition = 'padding 0.75s, height 0.75s, maringBottom 0.75s';
+    node.style.minHeight = 0;
+    node.style.height = height >= 48 ? height + 'px' : '48px';
+
+    requestAnimationFrame(function () {
+      node.style.padding = 0;
+      node.style.height = 0;
+      node.style.marginBottom = 0;
+      requestAnimationFrame(function () {
+        return node.classList.add(exit);
+      });
+    });
+  };
 
   return _react2.default.createElement(
     _Transition2.default,
     _extends({}, props, {
       timeout: 750,
-      onEnter: function onEnter(node) {
-        return node.classList.add(enter);
-      },
-      onEntered: function onEntered(node) {
-        return node.classList.remove(enter);
-      },
-      onExit: function onExit(node) {
-        return node.classList.add(exit);
-      }
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit
     }),
     children
   );