需求背景
在最近的项目中,遇到一个比较复杂的场景,点击触发后会打开modal弹框,但是因为情况比较多,总共有3种方式都可以打开modal框,所以在父组件的处理就比较复杂,涉及到了多次渲染,就导致modal框在打开的时候,会闪一下。
我也知道,处理好多次渲染的问题,modal框应该在打开的时候就不会闪了,但是,因为需求场景比较复杂,如果要处理多次渲染,那就会导致modal框打开后的各种问题,所以不能修改
解决
在仔细看了官网的api后,发现一个属性, maskTransitionName
其实就是将Modal动画关闭。
<Modal maskTransitionName=''>
{children}
</Modal>
你可以通过 transitionName="" 和 maskTransitionName="" 去除动画 CSS,但是需要注意的是。该方法为内部方法,我们不保证下个大版本重构时该属性会被保留。
遗留
目前这样的方式 是可以解决的,但其实不太优雅,之后还是需要去优化父组件的渲染来解决modal打开闪一下的情况