Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する

Post on:2023年7月26日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。

一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。

Rediento -Bento Radio Group Carousel thing

実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。

各パネルは、CSS Gridでレイアウト。
positionはなし。
ビジュアルのトランジションがアップグレード。
動きの軽快さを重視。
伸び縮みするスキッシュエフェクトをイージングで実装。

実際の動作は、下記デモページでご覧ください。
左上「Edit on Codepen」をクリックして別タブで開いた方が楽しめます。
※デモはChrome, Edgeでご覧ください。

See the Pen
Radiento - Bento Radio Group Carousel thing by Adam Argyle (@argyleink)
on CodePen.

実装を見てみましょう。
HTMLは各パネルをdivで実装しており、それぞれラジオボタンとラベルがあります。

<fieldset id="radiento" class="bento">
  <div>
    <input type="radio" id="huey" name="drone" value="huey"
           checked>
    <label for="huey">Huey</label>
  </div>

  <div>
    <input type="radio" id="dewey" name="drone" value="dewey">
    <label for="dewey">Dewey</label>
  </div>

  <div>
    <input type="radio" id="louie" name="drone" value="louie">
    <label for="louie">Louie</label>
  </div>
</fieldset>

<div>

<input type="radio" id="huey" name="drone" value="huey"

checked>

</div>

<div>

<label for="dewey">Dewey</label>

</div>

<div>

<label for="louie">Louie</label>

</div>

</fieldset>

View Transitions APIはJavaScriptで.startViewTransition()を呼び出して使用します。

document.querySelectorAll('#radiento input').forEach(radio => {
  radio.onclick = e => {
    if (!document.startViewTransition) return;

    e.preventDefault();

    document.startViewTransition(() => {
      e.target.checked = true;
    });
  };
});

document.querySelectorAll('#radiento input').forEach(radio => {

radio.onclick = e => {

if (!document.startViewTransition) return;

e.preventDefault();

document.startViewTransition(() => {

e.target.checked = true;

});

};

});

伸び縮みするスキッシュエフェクトは、Open PropsのCSSが使用されています。
参考: 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

::view-transition-group(*) {
  animation-timing-function: var(--ease-squish-1);
  animation-duration: .75s;
}

@layer demo {
  .bento {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--size-3);
    
    min-inline-size: 50vh;
    aspect-ratio: var(--ratio-widescreen);
    
    & > :not(legend) {
      border-radius: var(--radius-3);
      background: var(--surface-2);
      
      @media (prefers-reduced-motion: no-preference) {
        &:nth-child(1) {
          view-transition-name: opt-1;
          & > label {
            view-transition-name: opt-1-label;
          }
          & > input {
            view-transition-name: opt-1-input;
          }
        }
        &:nth-child(2) {
          view-transition-name: opt-2;
          & > label {
            view-transition-name: opt-2-label;
          }
          & > input {
            view-transition-name: opt-2-input;
          }
        }
        &:nth-child(3) {
          view-transition-name: opt-3;
          & > label {
            view-transition-name: opt-3-label;
          }
          & > input {
            view-transition-name: opt-3-input;
          }
        }

        & :is(label, input) {
          width: fit-content;
        }
      }
    }
    
    & > div:has(input:checked) {
      grid-row: 1 / -1;
      grid-column: 1;
    }
  }
}

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  } 
  
  fieldset {
    border: none;
    
    > div {
      display: grid;
      grid: 1fr / 1fr;
      padding: var(--size-3);

      & > label {
        grid-area: 1 / 1;
      }
    }
  }
}

@import "https://unpkg.com/open-props" layer(design.system);

@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

::view-transition-group(*) {

animation-timing-function: var(--ease-squish-1);

animation-duration: .75s;

}

@layer demo {

.bento {

display: grid;

grid-template-columns: 2fr 1fr;

grid-template-rows: 1fr 1fr;

gap: var(--size-3);

min-inline-size: 50vh;

aspect-ratio: var(--ratio-widescreen);

& > :not(legend) {

border-radius: var(--radius-3);

background: var(--surface-2);

@media (prefers-reduced-motion: no-preference) {

&:nth-child(1) {

view-transition-name: opt-1;

& > label {

view-transition-name: opt-1-label;

}

& > input {

view-transition-name: opt-1-input;

}

&:nth-child(2) {

view-transition-name: opt-2;

& > label {

view-transition-name: opt-2-label;

}

& > input {

view-transition-name: opt-2-input;

}

&:nth-child(3) {

view-transition-name: opt-3;

& > label {

view-transition-name: opt-3-label;

}

& > input {

view-transition-name: opt-3-input;

}

& :is(label, input) {

width: fit-content;

}

& > div:has(input:checked) {

grid-row: 1 / -1;

grid-column: 1;

}

@layer demo.support {

body {

display: grid;

place-content: center;

padding: var(--size-5);

gap: var(--size-5);

}

fieldset {

border: none;

> div {

display: grid;

grid: 1fr / 1fr;

padding: var(--size-3);

& > label {

grid-area: 1 / 1;

}

元ネタは下記ツイートより。

#CSS Radiento

a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓

✅ grid layout
✅ no abs positions
✅ visual transition is an upgrade
✅ respects reduced motion
✅ keyboard still rockshttps://t.co/FsiVmkv360 pic.twitter.com/0halUZBQd5

— Adam Argyle (@argyleink) July 17, 2023