remove velocity-anim

components/common/openAnimation.js

@@ -1,44 +1,35 @@
-let velocity;
-if (typeof document !== 'undefined' && typeof window !== 'undefined') {
-  velocity = require('velocity-animate');
-}
+import cssAnimation from 'css-animation';
 
-function animate(node, show, transitionName, done) {
-  let ok;
-
-  function complete() {
-    if (!ok) {
-      ok = true;
+function animate(node, show, done) {
+  let height;
+  return cssAnimation(node, 'ant-motion-collapse', {
+    start() {
+      if (!show) {
+        node.style.height = `${node.offsetHeight}px`;
+      } else {
+        height = node.offsetHeight;
+        node.style.height = 0;
+      }
+    },
+    active() {
+      node.style.height = `${show ? height : 0}px`;
+    },
+    end() {
+      node.style.height = '';
       done();
-    }
-  }
-
-  // Fix safari flash bug
-  /*eslint-disable */
-  node.style.display = show ? 'block' : 'none';
-  /*eslint-enable */
-  velocity(node, transitionName, {
-    duration: 240,
-    complete,
-    easing: 'easeInOutQuad'
+    },
   });
-  return {
-    stop() {
-      velocity(node, 'finish');
-      complete();
-    }
-  };
 }
 
 const animation = {
   enter(node, done) {
-    return animate(node, false, 'slideDown', done);
+    return animate(node, true, done);
   },
   leave(node, done) {
-    return animate(node, true, 'slideUp', done);
+    return animate(node, false, done);
   },
   appear(node, done) {
-    return animate(node, false, 'slideDown', done);
+    return animate(node, true, done);
   },
 };
 

package.json

@@ -34,14 +34,14 @@
   "dependencies": {
     "array-tree-filter": "~1.0.0",
     "classnames": "~2.2.0",
-    "css-animation": "~1.1.0",
+    "css-animation": "~1.2.0",
     "gregorian-calendar": "~4.1.0",
     "gregorian-calendar-format": "~4.1.0",
     "rc-animate": "~2.0.2",
     "rc-calendar": "~5.4.0",
     "rc-cascader": "~0.9.0",
     "rc-checkbox": "~1.3.0",
-    "rc-collapse": "~1.4.4",
+    "rc-collapse": "~1.5.0",
     "rc-dialog": "~5.4.0",
     "rc-dropdown": "~1.4.3",
     "rc-form": "~0.14.0",
@@ -67,7 +67,6 @@
     "rc-upload": "~1.9.0",
     "rc-util": "~3.1.2",
     "react-slick": "~0.11.0",
-    "velocity-animate": "~1.2.2",
     "warning": "~2.1.0"
   },
   "devDependencies": {

style/components/collapse.less

@@ -12,6 +12,10 @@
   border-radius: 3px;
   border: 1px solid @border-color-base;
 
+  &-anim-active {
+    transition: height .2s ease-out;
+  }
+
   & > &-item {
     border-top: 1px solid @border-color-base;
     &:first-child {
@@ -49,7 +53,6 @@
   }
 
   &-content {
-    display: none;
     overflow: hidden;
     color: @text-color;
     padding: 0 16px;
@@ -60,8 +63,8 @@
       padding-bottom: 16px;
     }
 
-    &-active {
-      display: block;
+    &-inactive {
+      display: none;
     }
   }
 

style/core/motion.less

@@ -29,6 +29,13 @@
   }
 }
 
+.ant-motion-collapse {
+  overflow: hidden;
+  &-active {
+    transition: height .2s ease-out;
+  }
+}
+
 @import "motion/fade";
 @import "motion/move";
 @import "motion/other";