refactor: Use pure react new life cycle method

.eslintrc.js

@@ -0,0 +1,15 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'default-case': 0,
+    'react/no-find-dom-node': 0,
+    'react/no-did-update-set-state': 0,
+    'react/no-unused-state': 1,
+    'react/sort-comp': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+  },
+};

.fatherrc.js

@@ -0,0 +1,8 @@
+export default {
+  cjs: 'babel',
+  esm: { type: 'babel', importLibToEs: true },
+  preCommit: {
+    eslint: true,
+    prettier: true,
+  },
+};

.gitignore

@@ -1,3 +1,4 @@
+.storybook
 *.iml
 *.log
 .idea

.travis.yml

@@ -1,31 +1,17 @@
 language: node_js
 
-sudo: false
-
-notifications:
-  email:
-  - [email protected]
-
 node_js:
-- 6.9.1
+  - 10
 
-before_install:
-- |
-    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
-    then
-      echo "Only docs were updated, stopping build process."
-      exit
-    fi
-    phantomjs --version
 script:
 - |
     if [ "$TEST_TYPE" = test ]; then
-      npm test
+      npm run coverage && \
+      bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=coverage
+  - TEST_TYPE=test

examples/case.less

@@ -0,0 +1,105 @@
+// ======================= Popup =======================
+.case-motion {
+  transform-origin: 50% 50%;
+
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-fill-mode: both;
+
+  &::after {
+    content: 'Animating...';
+    position: absolute;
+    bottom: -3em;
+  }
+
+  &-appear,
+  &-enter {
+    animation-play-state: paused;
+
+    &-active {
+      animation-name: case-zoom-in;
+      animation-play-state: running;
+    }
+  }
+
+  &-leave {
+    animation-play-state: paused;
+
+    &-active {
+      animation-name: case-zoom-out;
+      animation-play-state: running;
+    }
+  }
+}
+
+@keyframes case-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes case-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+}
+
+// ======================= Mask =======================
+.mask-motion {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+
+  &-appear,
+  &-enter {
+    animation-play-state: paused;
+    opacity: 0;
+
+    &-active {
+      animation-name: mask-zoom-in;
+      animation-play-state: running;
+    }
+  }
+
+  &-leave {
+    animation-play-state: paused;
+
+    &-active {
+      animation-name: mask-zoom-out;
+      animation-play-state: running;
+    }
+  }
+}
+
+@keyframes mask-zoom-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes mask-zoom-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}