Ant Design 的魔法：揭秘 Modal 令人惊叹的手势效果

2024-01-09 02:14:08

在前端开发的世界中，Ant Design 以其优雅的设计和强大功能而备受推崇。其 Modal 组件就是明证，它提供了一种高效且用户友好的方式，用于在页面上显示信息或收集用户输入。然而，隐藏在 Modal 引人入胜的外表之下的是一个令人着迷的机制，它赋予了手势效果以魔力。

当您与 Modal 进行交互时，您可能没有意识到幕后发生着复杂的计算。为了解开这些秘密，我们潜入 Modal 的源代码中，仔细观察 onPrepare 函数。此函数负责根据内容的位置和鼠标位置计算 transfromOrigin 值，该值随后附加到对话框的内容元素上。

onPrepare(content, mousePosition) {
  const { width, height } = this.state.modalInnerWidthHeight;
  const style = {};
  let contentOffset;

  const x = mousePosition.pageX;
  const y = mousePosition.pageY;

  const onBottom = y >= height * 0.8;
  const onLeft = x < width * 0.25;
  const onRight = x >= width * 0.75;
  const onCenterX = x >= width * 0.25 && x <= width * 0.75;
  const onCenterY = y >= height * 0.25 && y <= height * 0.75;

  if (onBottom) {
    contentOffset = this.horizontalBottomTransitionOffset;
  } else if (onCenterY) {
    contentOffset = this.horizontalCenterTransitionOffset;
  }

  if (onLeft) {
    contentOffset = {
      x: contentOffset ? `${contentOffset.x}px` : '-160px',
      y: contentOffset ? `${contentOffset.y}px` : '0px',
    };
  } else if (onRight) {
    contentOffset = {
      x: contentOffset ? `${contentOffset.x}px` : '160px',
      y: contentOffset ? `${contentOffset.y}px` : '0px',
    };
  } else if (onCenterX) {
    contentOffset = {
      x: contentOffset ? `${contentOffset.x}px` : '0px',
      y: contentOffset ? `${contentOffset.y}px` : '0px',
    };
  }

  if (contentOffset) {
    style.transformOrigin = `${contentOffset.x} ${contentOffset.y}`;
  }

  return style;
}