CSS23 · מעבר מצבים חלק (View Transitions)

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS23 · מעבר מצבים חלק (View Transitions) */
@view-transition{navigation:auto}
.vt-wrap{padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px))}
.vt-item{aspect-ratio:4/3;border-radius:var(--r, 14px);cursor:pointer;font-size:22px}
.vt-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));align-items:center}
.vt-detail .vt-item{aspect-ratio:16/10;font-size:34px;cursor:default}
.vt-back{margin-bottom:18px}
.vt-note{color:var(--muted, #6a6d85);font-size:14px;margin-top:18px}
.vt-detail h3{font-size:clamp(24px,2.4vw,38px);margin:0 0 10px}
.vt-detail p{color:var(--muted, #6a6d85);margin:0}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media(max-width:767px){.vt-grid{grid-template-columns:repeat(2,1fr)}.vt-detail{grid-template-columns:1fr}}

HTML

<div class="stage tight"><div class="vt-wrap">
  <div class="vt-stage"></div>
  <p class="vt-note">לחץ על פריט ואז על חזרה. אם הדפדפן לא תומך ב-View Transitions, ההחלפה פשוט מיידית.</p>
</div></div>

JS

(function(){
  const stage=document.querySelector(".vt-stage");
  const ITEMS=[{n:"1",c:"ph-a",t:"מהלך ראשון"},{n:"2",c:"ph-b",t:"מהלך שני"},{n:"3",c:"ph-c",t:"מהלך שלישי"},
               {n:"4",c:"ph-d",t:"מהלך רביעי"},{n:"5",c:"ph-e",t:"מהלך חמישי"},{n:"6",c:"ph-f",t:"מהלך שישי"}];
  const grid=()=>'<div class="vt-grid">'+ITEMS.map(i=>
    '<div class="vt-item ph '+i.c+'" data-n="'+i.n+'" style="view-transition-name:card-'+i.n+'">'+i.n+'</div>').join("")+'</div>';
  const detail=i=>'<button class="gbtn vt-back">→ חזרה לכל הפריטים</button>'+
    '<div class="vt-detail"><div class="vt-item ph '+i.c+'" style="view-transition-name:card-'+i.n+'">'+i.n+'</div>'+
    '<div><h3>'+i.t+'</h3><p>אותו אלמנט בדיוק, בגודל ובמיקום חדשים. הדפדפן מנפיש את המעבר בעצמו, בלי ספריית אנימציה.</p></div></div>';
  function swap(html){
    const paint=()=>{stage.innerHTML=html;bind();};
    if(document.startViewTransition)document.startViewTransition(paint);else paint();
  }
  function bind(){
    stage.querySelectorAll(".vt-grid .vt-item").forEach(el=>
      el.addEventListener("click",()=>swap(detail(ITEMS.find(i=>i.n===el.dataset.n)))));
    const back=stage.querySelector(".vt-back");
    if(back)back.addEventListener("click",()=>swap(grid()));
  }
  stage.innerHTML=grid();bind();
})();