Html and Css & Jsآموزش: “نمونه کد عملی برای پیاده‌سازی CSS View Transitions 🎬 نمونه کد: CSS Vi…”

نمونه کد عملی برای پیاده‌سازی CSS View Transitions

🎬 نمونه کد: CSS View Transitions

۱. فعال‌سازی ساده روی همه صفحات

ساده‌ترین راه، فعال‌سازی روی <html> هست. فقط کافیه این CSS رو اضافه کنی:

@view-transition {
navigation: auto;
}

همین! حالا هر جابه‌جایی بین صفحات، خودکار انیمیشن داره.

۲. شخصی‌سازی انیمیشن با @keyframes

می‌تونی تعیین کنی صفحه قدیم چطور محو بشه و صفحه جدید چطور ظاهر بشه:

::view-transition-old(root) {
animation: fadeOut 0.4s ease-out;
}

::view-transition-new(root) {
animation: fadeIn 0.4s ease-in;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-20px);
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
}

۳. انیمیشن اختصاصی برای یک المان خاص

فرض کن می‌خوای وقتی از یه صفحه به صفحه دیگه می‌ری، یه کارت خاص جابه‌جا بشه. کافیه بهش یه view-transition-name بدی:

<article style="view-transition-name: hero-card;">
<h1>تیتر اصلی</h1>
<p>توضیحات کارت</p>
</article>

و تو CSS:

::view-transition-old(hero-card),
::view-transition-new(hero-card) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

۴. مثال کامل: یک صفحه با دو لینک

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>دموی View Transitions</title>
<style>
@view-transition {
navigation: auto;
}

body {
font-family: sans-serif;
padding: 2rem;
background: #f5f5f5;
}

.card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
view-transition-name: main-card;
}

a {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
text-decoration: none;
border-radius: 6px;
}

::view-transition-old(root) {
animation: slideOut 0.3s ease-in;
}

::view-transition-new(root) {
animation: slideIn 0.3s ease-out;
}

@keyframes slideOut {
to { opacity: 0; transform: translateX(-30px); }
}

@keyframes slideIn {
from { opacity: 0; transform: translateX(30px); }
}
</style>
</head>
<body>
<div class="card">
<h1>صفحه اصلی</h1>
<p>روی دکمه زیر بزن تا انیمیشن جابه‌جایی رو ببینی.</p>
<a href="page2.html">برو به صفحه دوم</a>
</div>
</body>
</html>

۵. مثال با JavaScript (برای SPA)

function navigateTo(url) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}

document.startViewTransition(() => {
window.location.href = url;
});
}

💎 @Htmlcss_channels | #HTML #css #JavaScript