当前位置：首页 > article >正文

h5页面使用antd-modal，怎么处理居中且自然

article 2025/1/16 6:04:10

背景

老项目中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 } = props
  const [opacity, setOpacity] = useState(false)

  useEffect(() => {
    if (open) {
      // 延迟展示弹窗，避免给用户造成弹窗的闪烁
      setTimeout(() => {
        setOpacity(true)
      }, 500)
    }
    return () => {
      setOpacity(false)
    }
  }, [open])

  return (
    <Modal
      footer={null}
      open={open}
      wrapClassName={cx(styles.my_modal, opacity && styles.my_modal_show)}
    >
      <div>
        我被丝滑打开了
        <h2>关闭</h2>
      </div>
    </Modal>
  )
}

export default MyModal