search

ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.63k stars 2.39k forks source link

弹窗与抽屉出场动画消失 #6462

Closed JackGuiYang12 closed 9 months ago

JackGuiYang12 commented 10 months ago

Version of antd-mobile

No response

Description

在使用 antd-mobile 的时候，如果在 dialog 或者是 popup 组件外套一层 visible 和 控制 popup 的visible 一致的时候，出场动画会消失

{visible &&<Popup visible={visible}></Popup>}

当然这是一个例子，具体为什么要这么做，不用太 care，但是这样会导致出场动画消失，想明白这是为什么？

JackGuiYang12 commented 10 months ago

因为你的组件已经立马销毁了，组件内部没机会展示离场动画。 可是我说的是出场动画啊🤔

IronKinoko commented 10 months ago

在线demo https://codesandbox.io/p/sandbox/vibrant-babycat-yjzfpr

查看源码，如果 visible 默认是true，translate 初始值就是0，等于跳过动画了，已经被推入了界面。如果初始值是从 false 到 true，会有 100（屏幕外） 到 0 的推入过程 https://github.com/ant-design/ant-design-mobile/blob/51d00fd33bc912d38556fcb3e169f92975d1a3cd/src/components/popup/popup.tsx#L55-L56

https://github.com/ant-design/ant-design-mobile/blob/51d00fd33bc912d38556fcb3e169f92975d1a3cd/src/components/popup/popup.tsx#L124-L142

JackGuiYang12 commented 10 months ago

在线demo https://codesandbox.io/p/sandbox/vibrant-babycat-yjzfpr

查看源码，如果 visible 默认是true，translate 初始值就是0，等于跳过动画了，已经被推入了界面。如果初始值是从 false 到 true，会有 100（屏幕外） 到 0 的推入过程

https://github.com/ant-design/ant-design-mobile/blob/51d00fd33bc912d38556fcb3e169f92975d1a3cd/src/components/popup/popup.tsx#L55-L56

https://github.com/ant-design/ant-design-mobile/blob/51d00fd33bc912d38556fcb3e169f92975d1a3cd/src/components/popup/popup.tsx#L124-L142

我大致理解了，那这个你们后续会考虑改一下吗？

1587315093 commented 9 months ago

既然代码是特意这样的，也不好去改动了

，那这个你们后续会考虑改一下吗？