`autoDestroy` makes component destoried before transition end.

[heroboy]

首先看这个示例： https://codesandbox.io/s/cool-tree-2j0rm?file=/src/App.js 没有消失动画，去掉autoDestroy就有了。 其实都是和 https://github.com/ant-design/ant-design/issues/28151 这个有关的。 总而言之，就是没有正确实现afterVisibleChange。 destroy应该在完全消失动画结束后的，也就是afterVisibleChange(false)的时候。 看index.tsx中这段代码：

  let portal: React.ReactElement;
  // prevent unmounting after it's rendered
  if (popupVisible || this.popupRef.current || forceRender) {
	portal = (
	  <PortalComponent
		key="portal"
		getContainer={this.getContainer}
		didUpdate={this.handlePortalUpdate}
	  >
		{this.getComponent()}
	  </PortalComponent>
	);
  }

  if (!popupVisible && autoDestroy) {
	portal = null;
  }

  return (
	<TriggerContext.Provider
	  value={{ onPopupMouseDown: this.onPopupMouseDown }}
	>
	  {trigger}
	  {portal}
	</TriggerContext.Provider>
  );

我对你们代码不是100%了解。以下是我的猜测：

• portal变成null，弹出内容就彻底消失了
• popupVisible就是一般的visible，只要变成false，就会开始播放消失动画
• ~~this.popupRef.current是在一般情况下，即使popupVisible变成false，也能在播放消失动画的时候能渲染出来的原因。也就是动画结束this.popupRef.current会变成null。~~ 猜错了this.popupRef.current只要开始显示了，就不会变成null了。

所以，我猜测应该这么改：

• 一种，是用CSSMotion的onAppearEnd onLeaveEnd等事件来得知动画消失的时机，来实现afterVisibleChange。不过这要改到PopupInner.tsx里了。
• 还有一种，直接在这个文件里改，当popupVisible从false变成true的时候afterVisibleChange(true)。当this.popupRef.current从<true>变成<false>的时候afterVisibleChange(false)。

[matthosch]

+1