带有 svg 图像、css、html、js 的页面之间的过渡效果

Question

好的，也许 stackoverflow 可以提供帮助？ :)

我正在尝试使用 svg 图像创建页面过渡效果，但没有任何运气。 当用户点击第 1 页中的链接时，菱形的 svg 会像门户一样淡入第 2 页。

基本想法是在 Alphaville - Forever Young 视频的介绍中重现太空旅行：https://www.youtube.com/watch?v=t1TcDHrkQYg :)

也许钻石也会从蓝色变为透明（但这是下一步）。

钻石 svg：https://www.onlinewebfonts.com/icon/413

Answer 1

我建议您使用clip-path 而不是 svg，因为对那么大的 svg 进行动画处理会非常缓慢而且非常滞后。您可以更改剪辑路径以显示您想要的内容。 Bennet Feely 创建了一个很好的生成器来帮助解决这个问题。

对于动画本身，您可以增加宽度和高度以适合您的屏幕。然后通过动画 Z 轴来填充剩余部分。

动画在全屏下比在较小的预览中看起来更好

const links = document.querySelectorAll(".page-transition");
const overlay = document.querySelector(".overlay__diamond");

for(const link of links) {
  link.addEventListener("click", (event) => {
    event.preventDefault();
    
    overlay.classList.add("overlay__diamond--animate");
    
    setTimeout(() => window.location.reload(), 1000);
    
    // This one is correct, one above is for the demo
    // setTimeout(() => (window.location.href = link.href), 1000); // Same time as animation duration
  });
}

.page {
  background: green;
  
  /* For demontrational purposes only, just to increase page size */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  perspective: 500px; /* Needed for translateZ to work */
}

.overlay__diamond {
  width: 100%;
  height: 100%;
  background: blue;
  animation: fadeout 1s linear forwards;
}

.overlay__diamond--animate {
  animation: zoom 1s linear forwards;
  clip-path: polygon(50% 0%, 75% 50%, 50% 100%, 25% 50%);
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoom {
  0% {
    width: 0;
    height: 0;
    transform: translateZ(0);
  }
  100% {
    width: 100%;
    height: 100%;
    transform: translateZ(400px); /* Can't go higher then the perspective */
  }
}

<div class="page">
  <!-- Replace #link with your actual urls -->
  <a class="page-transition" href="#link">Link</a>
  <a class="page-transition" href="#link">Link</a>
  <a class="page-transition" href="#link">Link</a>
  
  <div class="overlay">
    <div class="overlay__diamond"></div>
  </div>
</div>