通过剪辑路径圆形过渡/动画让叠加 div 变得可见

Question

我有两个

<div>

填满了整个页面。第一个 div（蓝色）最初显示，第二个 div（黄色）隐藏 (

display:none

)。如果我单击蓝色 div，我想显示黄色叠加 div。然后，如果我点击黄色 div，我希望它消失。

到目前为止，如果我只是使用 jQuery 在

display:block

和

display:none

之间切换，就可以了。然后我就可以在两个 div 之间切换了。

如何为从

display:none

切换到

display:block

时的情况添加过渡效果（在最好的情况下，反之亦然）？

我想要一个开/关圆圈！

我不知道这在纯 CSS 加 JavaScript 加 jQuery 中是否可行。如果可以的话，我猜可能会围绕

clip-path

和

transition

展开？ 如果可能的话，我想避免仅仅为了这个动画效果而使用繁重的第三方库。

请看我的草图：

非常感谢您的建议！

Answer 1

您可以为

clip-path

属性设置动画。您只需确保在两种情况下都使用

circle

（或者至少对于两种状态都使用相同的）。我使用

75vmax

作为最终的圆圈大小，但这只是目测。为了 100% 确定整个屏幕被覆盖，您可能应该根据您的屏幕尺寸或您希望圆圈覆盖的区域进行计算。您可以轻松找到在线的数学计算。

let card = document.querySelector('.card');
card.addEventListener('click', e => card.classList.toggle('card--overlay'));

.card {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: blue;
}
.card.card--overlay .overlay {
  clip-path: circle(75vmax at 50% 50%);
}

.overlay {
  position: absolute;
  inset: 0;
  background-color: yellow;
  clip-path: circle(0% at 25% 75%);
  transition: clip-path 1s ease;
}

<div class="card">
  <div class="overlay"></div>
</div>