refactor: Use pure react new life cycle method

[zombieJ]

Refactor the steps in each frame instead of mix up:

• measure - check for the current stretch size
• align - let component align the position
• afterAlign - choice next step is trigger motion or finished
• beforeMotion - should reset motion to invisible so that CSSMotion can do normal motion
• motion - play the motion
• stable - everything is done

Each visible reset will start from the top.

TODO

• Test Case

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://trigger-git-animation.react-component.now.sh

[lgtm-com]

This pull request introduces 2 alerts when merging 5929934 into cc3104a - view on LGTM.com

new alerts:

• 2 for Unused variable, import, function or class

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@cc3104a). Click here to learn what that means.
The diff coverage is 83.62%.

@@            Coverage Diff            @@
##             master     #144   +/-   ##
=========================================
  Coverage          ?   83.62%           
=========================================
  Files             ?        7           
  Lines             ?      452           
  Branches          ?      120           
=========================================
  Hits              ?      378           
  Misses            ?       74           
  Partials          ?        0

Impacted Files	Coverage Δ
src/utils/legacyUtil.ts	100% <100%> (ø)
src/context.ts	100% <100%> (ø)
src/mock.tsx	100% <100%> (ø)
src/utils/alignUtil.ts	100% <100%> (ø)
src/index.tsx	79.53% <79.53%> (ø)
src/PopupInner.tsx	88.88% <88.88%> (ø)
src/Popup.tsx	89.74% <89.74%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cc3104a...9cddc01. Read the comment docs.

[zombieJ]

加了一些改动地方的测试