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

问题描述

好吧，也许stackoverflow可以帮上忙吗？ ：）

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

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

也许钻石也从蓝色逐渐淡化为透明（但这是下一步）。

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

解决方法

我建议您使用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>