背景

老项目中h5和pc端采用同一个组件来处理前端布局适配的问题，所以用到@media这个媒体查询方法, 先后需要针对不同端做一些样式处理。
问题出现的原因：

在处理modal组件的弹窗居中上，pc端通过transfrom【translate】加上top,left很快就解决了居中问题，并且不会有移动的效果展现给用户；但是h5端，出现了延迟translate移动的问题，导致给用户使用造成弹窗缓慢移动到居中位置的效果

目的

出现这种现象，产品那边肯定是不过关的，所以我们最好是把它扼杀在摇篮里，不要到产品验收的时候再被提出有问题。。。

涉及的技术栈

• react@16.8以上
• antd-design@4.x
• css3
• 媒体查询@media

先看看效果

核心代码处理

less文件的代码:

@media screen and (max-width: 600px) {.my_modal {opacity: 0;&_show {opacity: 1;}}:global {.ant-modal {top: 50%;transform: translateY(-50%);}}
}

react组件的代码

import React, { useState, useEffect } from "react"
import { Modal } from "antd"
import styles from "./index.module.less"
import cx from "classnames"function MyModal(props) {const { open, onCancel } = propsconst [opacity, setOpacity] = useState(false)useEffect(() => {if (open) {// 延迟展示弹窗，避免给用户造成弹窗的闪烁setTimeout(() => {setOpacity(true)}, 500)}return () => {setOpacity(false)}}, [open])return (<Modalfooter={null}open={open}wrapClassName={cx(styles.my_modal, opacity && styles.my_modal_show)}><div>我被丝滑打开了<h2>关闭</h2></div></Modal>)
}export default MyModal

写在最后

如果有帮助到大家，就给博主点个赞吧，助人为乐让我开心开心！