今天开发大屏的遇到一个奇怪的问题就是我在组件中使用ant-design-vue的弹窗组件,本来一切都是正常的。大屏的结构一般都是左中右结构的嘛,后面leader说要两边的加上一些过渡动画。这个么也不难,我直接用的是animate.css,加上之后很不错,有过渡动画了。
但是图片发现 使用animate.css里面的弹窗都出问题,因为需要调整ant-design-vue弹窗的样式,所以挂载的节点是$refs.custommodal,不然想要修改样式就得在全局样式中修改。出现的问题就是,弹窗都是相对animate.css定位了,而ant-design-vue的弹窗是fixed定位的。
然后找到原因就是transform会对fixed定位影响
然后解决办法就是不要用transform。
我使用了另一个方法就是。因为ant-design-vue的弹窗组件提供了挂载节点的,我就又定义了弹窗样式组件放到最外层,然后将ant-design-vue的弹窗组件挂载节点设置成这个组件,弹窗样式组件主要就是来修改ant-design-vue的弹窗组件的样式的。
具体为什么transform对fixed定位会产生影响,知道的小伙伴在评论区分享一下。