实现Split Screen鼠标移出时Handle复位功能（参考Corsair效果）

嘿，我看了你现在的分屏代码，你想要实现像参考网站那样，鼠标离开分屏区域时控制条平滑回到中间的效果对吧？你的现有代码已经加了mouseleave事件，但还差平滑过渡的动画，而且重置逻辑得适配skewed模式的情况，下面是具体的修改方案：

第一步：给元素加上CSS过渡动画 #

首先得让控制条和顶层容器的变化有过渡效果，不然复位会很突兀。修改你的CSS，给这两个元素加上过渡属性：

.handle{
  /* 保留原有样式 */
  position: absolute;
  height: 100%;
  display: block;
  background-color: #FDAB00;
  width: 5px;
  top: 0;
  left: 50%;
  z-index: 3;
  /* 新增：添加过渡效果，时长可以自己调 */
  transition: left 0.5s ease;
}

.top{
  /* 保留原有样式 */
  background: #eee;
  color: #222;
  z-index: 2;
  width: 50vw;
  /* 新增：添加过渡效果 */
  transition: width 0.5s ease;
}

/* 针对skewed模式的顶层容器也要加过渡，不然斜切状态下复位会没动画 */
.skewed .top{
  /* 保留原有样式 */
  transform: skew(-30deg);
  margin-left: -1000px;
  width: calc(50vw + 1000px);
  /* 新增：添加过渡效果 */
  transition: width 0.5s ease;
}

第二步：完善JS的复位逻辑 #

你原来的复位函数没考虑skewed状态的适配，而且拖拽的时候如果保留过渡会有卡顿，所以我们要优化一下：

document.addEventListener('DOMContentLoaded', function () { 
  let wrapper = document.getElementById('wrapper'); 
  let topLayer = wrapper.querySelector('.top'); 
  let handle = wrapper.querySelector('.handle'); 
  let skew = 0; 
  let delta = 0; 

  if (wrapper.classList.contains('skewed')) { 
    skew = 1000; 
  } 

  function positionHandler(e) {
    // 拖拽的时候先关掉过渡，避免拖拽过程中出现卡顿的动画
    handle.style.transition = 'none';
    topLayer.style.transition = 'none';

    if (e.clientX) { 
      delta = (e.clientX - window.innerWidth / 2) * 0.5; 
      handle.style.left = e.clientX + delta + 'px'; 
      topLayer.style.width = e.clientX + skew + delta + 'px'; 
    } else if (e.targetTouches) { 
      delta = (e.targetTouches[0].clientX - window.innerWidth / 2) * 0.5; 
      handle.style.left = e.targetTouches[0].clientX + delta + 'px'; 
      topLayer.style.width = e.targetTouches[0].clientX + skew + delta + 'px'; 
      e.preventDefault(); 
    } 
  }; 

  wrapper.addEventListener('mousemove', positionHandler); 
  wrapper.addEventListener('touchstart', positionHandler); 
  wrapper.addEventListener('touchmove', positionHandler); 

  // 鼠标离开分屏区域时复位
  wrapper.addEventListener("mouseleave", resetPositionHandler);
  // 额外加个mouseup事件，防止拖拽时鼠标移出但没松开，导致不复位的情况
  document.addEventListener("mouseup", resetPositionHandler);

  function resetPositionHandler() {
    // 恢复过渡效果，让复位平滑
    handle.style.transition = 'left 0.5s ease';
    topLayer.style.transition = 'width 0.5s ease';

    // 根据是否是skewed模式，设置正确的初始值
    if (skew === 1000) {
      handle.style.left = '50%';
      topLayer.style.width = 'calc(50vw + 1000px)';
    } else {
      handle.style.left = '50%';
      topLayer.style.width = '50vw';
    }
  } 
});

第三步：可选优化 #

• 调整过渡时长：把0.5s改成你想要的速度，比如参考网站的速度大概是0.3-0.5秒，你可以自己试一下。
• 移动端适配：因为你加了touch事件，这个复位逻辑在移动端也能生效，用户松开手指后就会回到中间。

这样改完之后，当鼠标离开分屏区域（或者在移动端松开手指），控制条和顶层就会平滑地回到初始的中间位置，和你想要的效果一致啦！

内容的提问来源于stack exchange，提问作者John MacClain