Question

我已经更新了自己的帖子，因为自上周以来我已经提出了一些解决方案。

剪辑路径部分有问题。

我希望我的剪切路径（圆形）在鼠标离开剪切区时缩小然后消失，并在进入剪切区时再次扩大。

缩小正在起作用，但没有扩大（请参见下面的代码）。

非常欢迎所有帮助！

提前谢谢您，祝您愉快！

const circleClip = document.querySelector('#hidden');
let divSize = document.querySelector('#top').offsetHeight;

function removeIntro() {
  circleClip.classList.remove('intro');
}

function circleMove(e) {
  removeIntro();
  circleClip.style.setProperty('--x', e.clientX + 'px');
  circleClip.style.setProperty('--y', e.clientY - divSize + 'px');
}

circleClip.addEventListener('mouseleave', function(){
  circleClip.classList.toggle('shrink');
});

/*This one doesn't work on desktop*/
circleClip.addEventListener('mouseenter', function(){
  circleClip.classList.toggle('appear');
});

circleClip.addEventListener('mousemove', circleMove);
circleClip.addEventListener('touchmove', (e) => {
  removeIntro();
  
  let touch = e.touches[0];
  e.preventDefault();
  
  circleClip.style.setProperty('--x', touch.clientX + 'px');
  circleClip.style.setProperty('--y', touch.clientY - divSize + 'px');
});

/*This one doesn't work on mobile*/
  circleClip.addEventListener('touchstart', function(){
  circleClip.classList.toggle('appear');
});

  circleClip.addEventListener('touchend', function(){
  circleClip.classList.toggle('shrink');
});

body {
     position: relative;
     margin: 0;
     overflow: hidden;
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
}

#top {
  color: white;
  background: blue;
  font-size: 30px;
  text-align: center;
}

#hidden p {
  padding: 10%;
  font-family: sans-serif;
}

#hidden {
  font-size: 7vh !important;
  line-height: 1em;
  background: red;
    min-height: 100vh;
    clip-path: circle(10% at var(--x) var(--y));
  cursor: none;
}
 #hidden.intro {
     clip-path: circle(0% at 50% 50%);
     animation: circleIntro 1800ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

@keyframes circleIntro {
     100% {
         clip-path: circle(10% at 50% 50%);
    }
}

.shrink {
  clip-path: circle(10% at 50% 50%);
  animation: shrink 800ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

@keyframes shrink {
  100% {
    clip-path: circle(0% at 50% 50%);
  }
}

.appear {
  clip-path: circle(0% at 50% 50%);
  animation: appear 800ms cubic-bezier(0645, 0.045, 0.355, 1) both;
}

@keyframes appear {
  100% {
    clip-path: circle(10% at 50% 50%);
  }
}

<div id="top"><h1>This is another div</h1></div>
<div id="hidden" class="intro">
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
</div>

Answer 1

您似乎正在寻找类似的东西？

您可以将事件处理程序分为各自的功能：

function showCircle(e) {
    $(".clip").css({
        "-webkit-clip-path": "circle(0px at var(--x, 0) var(--y, 0))"
    });
}

function hideCircle(e) {
    $(".clip").css({
        "-webkit-clip-path": "circle(0px at var(--x, 0) var(--y, 0))"
    });
}

function moveCircle(e) {
    $(".clip").css ({
        '--x': e.pageX,
        '--y': e.pageY - $("#previoussection").height() - $("#clip_section").height()
    });
}

然后注册用于鼠标交互的处理程序，

$(document).mousemove(moveCircle);
$(".clip_container").mouseleave(hideCircle);
$(".clip_container").mouseenter(showCircle);

并用于触摸交互。

$(document).touchmove(moveCircle);
$(".clip_container").touchstart(hideCircle);
$(".clip_container").touchend(showCircle);

该圆没有缩小，因为它的CSS从未更改回0半径圆。

我认为这里的关键是确保将“剪切路径” CSS属性更改为表示您希望在相关事件触发时看到的圆的完整值。

还值得注意的是，您的mouseStopped函数永远不会在代码中被调用。

剪辑路径动画（CSS / JS）的mouseenter问题

1 个答案: