带有 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>