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

Question

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

我正在尝试用 svg 图像创建页面过渡效果，但运气不佳。当用户单击第 1 页中的 link 时，菱形 svg 会淡入，就像进入第 2 页的门户一样。

基本思路是在 Alphaville - Forever Young 视频的介绍中重新创建 space 旅行：https://www.youtube.com/watch?v=t1TcDHrkQYg :)

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

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

Answer 1

我建议你使用 clip-path instead of a svg since animating an svg that big will be really slow and really laggy. You can change the clip path to show what you want. 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>

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

Transitions effect between pages with svg image, css, html, js

html

javascript

animation

svg

css-transitions