fix: vertical animation not being affected by inline #578
Conversation
Codecov Report
@@ Coverage Diff @@
## master #578 +/- ##
=======================================
Coverage 99.85% 99.85%
=======================================
Files 26 26
Lines 707 710 +3
Branches 193 194 +1
=======================================
+ Hits 706 709 +3
Misses 1 1
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
|
好写 test case 么 |
我看看 |
|
如果没问题发个 minor 版本保险点 |
src/SubMenu/PopupTrigger.tsx
Outdated
| @@ -62,9 +62,20 @@ export default function PopupTrigger({ | |||
| const popupPlacement = popupPlacementMap[mode]; | |||
|
|
|||
| const targetMotion = getMotion(mode, motion, defaultMotions); | |||
| const [innerMotion, setInnerMotion] = React.useState(targetMotion); | |||
|
|
|||
| React.useEffect(() => { | |||
There was a problem hiding this comment.
Menu 这块越来越复杂了，v4 改由数据驱动后，重构这部分逻辑的活需要提上日程 @MadCcc
src/SubMenu/PopupTrigger.tsx
Outdated
| * When collapsed is unfolded, the inline animation will destroy the vertical animation. | ||
| */ | ||
| if (mode !== 'inline') { | ||
| setInnerMotion(targetMotion); |
There was a problem hiding this comment.
这里的处理主要是 mode 为 inline 的时候，不改变上一次 mode 的 Motion，inline 的 Motion 会破坏其他 mode 的隐藏动画
There was a problem hiding this comment.
比如一个弹窗在鼠标失去焦点后 other 有个动画 300ms 后会让这个弹窗隐藏，但是如果300ms内快速切换成 inline mode 的动画，那么 other 的隐藏动画就会失效
There was a problem hiding this comment.
那是不是用个 ref 就好了，不需要副作用？这样少一次渲染
const motionRef = useRef(targetMotion);
if (mode !== 'inline') {
motionRef.current = targetMotion;
}There was a problem hiding this comment.
那是不是用个 ref 就好了，不需要副作用？这样少一次渲染
确实~ 等会我试下
这是个祖传bug，一两年前就有这个问题
ant-design/ant-design#39283
mode 为 vertical 和 horizontal 才需要用到 PopupTrigger，
快速切换时 inline 的 Motion 会影响到 vertical 的结束动画。