サマリーへ滑らかに遷移する確認フォーム

<div class="d04-09-10-wrap">
          <div class="d04-09-10-form">
            <div class="d04-09-10-page is-show">
              <label class="d04-09-10-flabel">お名前</label>
              <input type="text" class="d04-09-10-finput" data-key="name" placeholder="山田 太郎">
            </div>
            <div class="d04-09-10-page">
              <label class="d04-09-10-flabel">メールアドレス</label>
              <input type="email" class="d04-09-10-finput" data-key="mail" placeholder="you@example.com">
            </div>
            <div class="d04-09-10-nav">
              <button type="button" class="d04-09-10-prevbtn" disabled>戻る</button>
              <button type="button" class="d04-09-10-nextbtn">確認へ</button>
            </div>
          </div>
          <div class="d04-09-10-summary">
            <p class="d04-09-10-stitle">入力内容の確認</p>
            <dl class="d04-09-10-list">
              <dt>お名前</dt><dd class="d04-09-10-vname">-</dd>
              <dt>メール</dt><dd class="d04-09-10-vmail">-</dd>
            </dl>
            <div class="d04-09-10-snav">
              <button type="button" class="d04-09-10-back">修正する</button>
              <button type="button" class="d04-09-10-submit">送信する</button>
            </div>
          </div>
        </div>

.d04-09-10-wrap{position:relative;width:min(280px,100%);min-height:190px}
        .d04-09-10-form,.d04-09-10-summary{
          position:absolute;inset:0;display:flex;flex-direction:column;
          opacity:0;transform:translateY(8px);pointer-events:none;
          transition:opacity .35s ease,transform .35s ease;
        }
        .d04-09-10-form.is-active,.d04-09-10-summary.is-active{
          opacity:1;transform:translateY(0);pointer-events:auto;
        }
        .d04-09-10-page{display:none;flex-direction:column;gap:6px;margin-bottom:12px}
        .d04-09-10-page.is-show{display:flex}
        .d04-09-10-flabel{font-size:11px;color:#8a93a3}
        .d04-09-10-finput{
          padding:10px 12px;font-size:13px;border:2px solid #d5d9e0;border-radius:8px;
          outline:none;background:#fff;font-family:inherit;
        }
        .d04-09-10-finput:focus{border-color:#4a6cf7}
        .d04-09-10-nav{display:flex;justify-content:space-between;gap:10px;margin-top:auto}
        .d04-09-10-nav button{
          padding:9px 14px;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;
        }
        .d04-09-10-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-10-nav button:disabled{opacity:.4;cursor:not-allowed}
        .d04-09-10-stitle{margin:0 0 10px;font-size:13px;font-weight:700;color:#333}
        .d04-09-10-list{margin:0 0 16px;font-size:12px;color:#445}
        .d04-09-10-list dt{color:#8a93a3;margin-top:8px}
        .d04-09-10-list dt:first-child{margin-top:0}
        .d04-09-10-list dd{margin:2px 0 0;font-weight:700;color:#333}
        .d04-09-10-snav{display:flex;justify-content:space-between;gap:10px;margin-top:auto}
        .d04-09-10-snav button{
          padding:9px 14px;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;transition:background .2s;
        }
        .d04-09-10-submit{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-10-submit:hover{background:#3a58d6}
        .d04-09-10-submit.is-sent{background:#22b573;border-color:#22b573;cursor:default}

(function(){
        var wrap=document.querySelector('.d04-09-10-wrap');
        if(!wrap)return;
        var form=wrap.querySelector('.d04-09-10-form');
        var summary=wrap.querySelector('.d04-09-10-summary');
        var pages=wrap.querySelectorAll('.d04-09-10-page');
        var prevBtn=wrap.querySelector('.d04-09-10-prevbtn');
        var nextBtn=wrap.querySelector('.d04-09-10-nextbtn');
        var backBtn=wrap.querySelector('.d04-09-10-back');
        var submitBtn=wrap.querySelector('.d04-09-10-submit');
        var vname=wrap.querySelector('.d04-09-10-vname');
        var vmail=wrap.querySelector('.d04-09-10-vmail');
        var total=pages.length;
        var cur=0;
        form.classList.add('is-active');
        function paintPages(){
          pages.forEach(function(p,i){p.classList.toggle('is-show',i===cur);});
          prevBtn.disabled=cur===0;
        }
        prevBtn.addEventListener('click',function(){
          if(cur>0){cur--;paintPages();}
        });
        nextBtn.addEventListener('click',function(e){
          e.preventDefault();
          if(cur<total-1){
            cur++;
            paintPages();
            return;
          }
          var nameVal=wrap.querySelector('[data-key="name"]').value.trim();
          var mailVal=wrap.querySelector('[data-key="mail"]').value.trim();
          vname.textContent=nameVal||'(未入力)';
          vmail.textContent=mailVal||'(未入力)';
          form.classList.remove('is-active');
          summary.classList.add('is-active');
        });
        backBtn.addEventListener('click',function(){
          summary.classList.remove('is-active');
          form.classList.add('is-active');
        });
        submitBtn.addEventListener('click',function(e){
          e.preventDefault();
          submitBtn.textContent='送信しました';
          submitBtn.classList.add('is-sent');
        });
      })();