Height Auto Transition

DEMO

<div class="demo-stage isz-stage">
  <div class="isz-col">
    <details class="isz-item" name="isz-faq">
      <summary class="isz-sum">送料はかかりますか？</summary>
      <p class="isz-body">5,000円以上のご注文で送料無料です。それ未満は全国一律550円です。</p>
    </details>
    <details class="isz-item" name="isz-faq">
      <summary class="isz-sum">届くまで何日かかりますか？</summary>
      <p class="isz-body">ご注文から2〜4日でお届けします。離島は1〜2日ほど長くかかることがあります。日時の指定もできます。</p>
    </details>
    <div class="isz-more">
      <div class="isz-clip" id="isz-clip">
        <p class="isz-body">この文章は最初は3行分だけ見えています。「続きを読む」を押すと、height: 4.8em から height: auto へ滑らかに伸びて全文が表示されます。以前は scrollHeight を JavaScript で測って px で指定する必要がありましたが、interpolate-size を指定すると auto のまま transition できます。</p>
      </div>
      <button type="button" class="isz-btn" id="isz-btn" aria-expanded="false" aria-controls="isz-clip">続きを読む</button>
    </div>
  </div>
</div>

.isz-stage { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem; background:#0B0B10; min-height:340px;
  interpolate-size: allow-keywords;   /* この枠の中では height: auto などへも補間できる */ }
.isz-col { display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:420px; }
.isz-item { border-radius:12px; background:#16161D; border:1px solid rgba(255,255,255,.1); }
.isz-sum { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:48px; padding:0 1rem; color:#EDEDED; font-size:.88rem; font-weight:600; cursor:pointer; list-style:none; }
.isz-sum::-webkit-details-marker { display:none; }
.isz-sum::after { content:'+'; color:#F472B6; font-size:1.2rem; transition: rotate .3s; }
.isz-item[open] .isz-sum::after { rotate:45deg; }
.isz-sum:focus-visible { outline:2px solid #fff; outline-offset:-2px; border-radius:12px; }
.isz-body { margin:0; padding:0 1rem 1rem; color:#C9C9D1; font-size:.82rem; line-height:1.8; }
/* details の中身：閉じると高さ 0、開くと auto。content-visibility を最後に切り替えて閉じる動きも見せる */
.isz-item::details-content { block-size:0; overflow:clip;
  transition: block-size .4s cubic-bezier(.22,1,.36,1), content-visibility .4s allow-discrete; }
.isz-item[open]::details-content { block-size:auto; }
.isz-more { padding:1rem 0 .4rem; border-radius:12px; background:#16161D; border:1px solid rgba(255,255,255,.1); }
.isz-clip { height:4.8em; overflow:hidden; transition: height .45s cubic-bezier(.22,1,.36,1);
  mask-image: linear-gradient(#000 55%, transparent); }
.isz-clip .isz-body { padding-bottom:0; }
.isz-clip.is-open { height:auto; mask-image:none; }
.isz-btn { margin:.5rem 1rem 0; min-height:44px; padding:0 1rem; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#F9A8D4; font:inherit; font-size:.82rem; cursor:pointer; }
.isz-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .isz-item::details-content, .isz-clip, .isz-sum::after { transition:none; }
}

(function(){
  var clip = document.getElementById('isz-clip');
  var btn = document.getElementById('isz-btn');
  if (!clip || !btn) return;
  btn.addEventListener('click', function(){
    var open = clip.classList.toggle('is-open');
    btn.setAttribute('aria-expanded', String(open));
    btn.textContent = open ? '閉じる' : '続きを読む';
  });
})();

AI PROMPT

これまで CSS だけでは動かせなかった height: auto への開閉を、interpolate-size で滑らかにするデモを作って。デモの枠に interpolate-size: allow-keywords を指定する（継承されるので中の要素全てに効く）。1つ目の型は details と summary の FAQ で、同じ name 属性を付けて1つ開くと他が閉じるようにし、details::details-content に block-size:0・overflow:clip と、block-size .4s と content-visibility .4s allow-discrete の transition を付け、details[open]::details-content で block-size:auto にする（content-visibility を最後に切り替えるので閉じる動きも見える）。summary の右の＋は開くと45度回して×にする。2つ目の型は「続きを読む」で、本文の箱を height:4.8em・overflow:hidden・下に向けて透明になる mask-image にしておき、ボタン（aria-expanded と aria-controls を付ける）で class を付けて height:auto にし、height .45s の transition で伸ばす。interpolate-size に未対応のブラウザでは transition が効かずに一瞬で開くだけなので、開閉そのものは全てのブラウザで動く。prefers-reduced-motion: reduce の時は transition を無効化する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。