TA貢獻1804條經驗 獲得超3個贊
我建議您使用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>
舉報