背景
老项目中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
写在最后
如果有帮助到大家，就给博主点个赞吧，助人为乐让我开心开心！
