鼠标移入方向通过容器边界与鼠标坐标的差值计算得出，以容器中心为原点判断相对位置，返回1~4代表top/right/bottom/left；遮罩层需按方向设对应边缘外侧初始位置，并用可动画定位属性配合显式transition实现精准方向动画。
鼠标移入方向怎么算出来的
方向不是靠猜，而是靠坐标差值判断：给定图片容器的 getBoundingClientRect() 四个边界值（left、top、right、bottom），再结合 event.pageX / event.pageY（或更推荐用 event.clientX / event.clientY 配合容器相对位置），就能算出鼠标是从哪边“切入”的。
核心逻辑是把容器中心点当作原点，把鼠标坐标映射到这个坐标系里，再比较 x 和 y 的绝对值大小与符号组合。常见实现返回 1~4 的整数，分别代表：top、right、bottom、left。
- 如果
mouseY - top 且 <code>mouseY - top → 更靠近上边 → <code>top - 如果
right - mouseX 且 <code>right - mouseX → 更靠近右边 → <code>right - 其余同理，不依赖 jQuery，纯 JS 就能写
遮罩层初始位置怎么设才对
方向确定后，遮罩层不能直接从中间弹出来——那就不叫“方向感知”了。它得从对应边缘外侧开始，比如从上方进入，遮罩就要从 top: -100% 开始；从左边进入，就从 left: -100% 开始。
关键点是：遮罩层必须用 position: absolute 挂在 position: relative 的父容器内，否则坐标基准错乱；同时要确保 overflow: hidden 在父容器上，否则初始态会漏出来。
立即学习“前端免费学习笔记（深入）”；
-
top方向 →styleCSS.from = { top: '-100%', left: 0, width: '100%', height: '100%' } -
right方向 →styleCSS.from = { top: 0, right: '-100%', width: '100%', height: '100%' } -
bottom方向 →styleCSS.from = { bottom: '-100%', left: 0, width: '100%', height: '100%' } -
left方向 →styleCSS.from = { top: 0, left: '-100%', width: '100%', height: '100%' }
transition 动画为什么有时不生效
最常踩的坑是：只写了 transition: all 0.3s，但没指定哪些属性参与过渡。CSS transition 对 display、height/width（从 0 变到具体值）这类“不可动画属性”完全无效，而方向遮罩依赖的是 top/left/right/bottom 这类可过渡定位属性。
- 必须显式声明过渡属性，例如：
transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease - 别用
opacity+visibility混搭控制显隐——这会让方向位移动画被覆盖或中断 - 如果用了
transform: translateY()替代top，那 transition 必须写成transform 0.3s ease，且起始态要用transform: translateY(-100%)，不能混用定位和 transform
mouseleave 时怎么让遮罩“原路退回”
很多人只做 mouseenter 动画，mouseleave 直接 hide() 或设 opacity: 0，结果就是遮罩“啪”一下消失，失去方向感。正确做法是：在 mouseleave 时，再次调用 _getDir()（传入 event 坐标），拿到离开方向，然后把遮罩层用同样的 transition 动画推回那个方向的初始位置。
注意：mouseleave 的坐标取法和 mouseenter 不同——它触发时鼠标可能已移出容器，所以应优先用 event.relatedTarget 辅助判断，或退而求其次，用容器边界中点 + 方向反推一个“近似退出点”。
- 不建议用
setTimeout延迟 hide —— 容易和 transition 冲突 - 如果用 jQuery，避免在
mouseleave中调用.stop(true, true)，它会清空 CSS transition 状态，导致动画跳变 - 纯 CSS 方案无法实现真正方向退出，必须 JS 控制；这也是为什么所有可靠的方向遮罩插件都依赖 JS 绑定事件
方向遮罩真正的难点不在“动起来”，而在“动得准”——坐标计算稍有偏差，遮罩就会从错误边缘滑出，或者卡在半途。尤其是容器带 border、padding、transform 或被缩放时，getBoundingClientRect() 返回的值需要手动校正。别省这一步。
