Refactor for fixing Animated re-render will cause transition disappear

[zombieJ]

• Upgrade rc-tools & fix eslint
• Remove dependency css-animation and use react lifecycle instead
• Use raf for active state trigger
• Align the transition/animation event with react
  • still use js event inject for keeping the origin behavior
• Use new react-lifecycles-compat for new life cycle method
• exclusive change can change the transition immediately
• Add more test case

Currently, className will be added by both React & js to keep the className work when sub component not accept the className props. But for styles, there is no better way for updating.
So it still has the issue when both React and animation change the style prop.

[afc163]

wow~ what is the primary commit for fixing?

[afc163]

why change this?

[zombieJ]

eslint

[zombieJ]

Primary for React will reset className when component trigger re-render.
Since origin code use js for update the class of dom which will be override by React batch update in commitWork.

ref: #38

[zombieJ]

@afc163 @yesmeck ,
This will used for rc-trigger, could you help for code review.

Thanks

[yesmeck]

别重命名，diff 没法看了。

[zombieJ]

代码逻辑从 Animate keys 转移到 AnimateChild 里了， diff 也没参考价值...

[zombieJ]

Mark: rc-menu code using workaround for origin animate issue. Should adjust haveRendered logic: https://github.com/react-component/menu/blob/master/src/SubMenu.jsx#L370
@picodoth

[zombieJ]

Mark: collapse in antd add empty apear() {} for appear trigger. This could pass as null:
https://github.com/ant-design/ant-design/blob/master/components/collapse/Collapse.tsx#L25
@afc163

(Inline code use css-animation for style changing. Let's just keep it)

[zombieJ]

Mark: rc-tree using React.Children.map to create the clone TreeNode which changes the key when next render: https://github.com/react-component/tree/blob/master/src/Tree.jsx#L715

Update: Also affected by empty apear() {}. Set to null can fix this.

[zombieJ]

@afc163 @yesmeck , 验证了一圈应该就 menu collapse 和 tree 需要调整一下，其他的动画都没有问题。 发一个 rc-aniamte 大版本，就能慢慢替掉了。

[yesmeck]

为啥要套个 genAnimate 方法

[zombieJ]

用来生成 支持/不支持 Transition 和 Animation 的实例做 Test Coverage。

[jljsj33]

哇操。。。。666

[zombieJ]

@afc163 @yesmeck, 看看有没有什么问题。
我准备发一版 3.0.0-rc 先走一圈看看对其他 rc 组件测试用例是否要更新。没问题就发 3.0.0 到 antd 3.7.0 里同步更新了。

[afc163]

rc 组件估计也要改一轮依赖。

[zombieJ]

嗯，现在在调试 trigger，发了一版 rc-trigger@3.0.0-rc.1 会一个个换过来。

[zombieJ]

ref: https://github.com/zombieJ/tree-select/tree/refactor

[zombieJ]

备注：
原本代码里关于 transition class 添加判断逻 isCssAnimationSupported || !props.animation[animationType]，这里有点问题。后半段判断条件导致如果环境不支持 transition 也会添加 transition class 但是结束事件不会触发（getPropertyValue 拿到是空，后继被 css-animation 的 setTimeout 延迟 200ms 清理 ）。
因而在测试环境里没有 transition-appear class 才是正确的。

新版逻辑复用了React的transition判断方式，对于不支持 transition 的环境（例如jest使用jsdom没有模拟transition），生命周期里便会处理掉。不过这会影响与之相关的所有测试用例(用到 rc-trigger 的)。

准备 tree-select 重构完后，把相关的其他组件的 test case 都更新一下。

[yesmeck]

不能直接用 window，SSR 会报错。

[zombieJ]

好了