初期画面

各パネルをクリックすると

各パネルをクリックすると画面が広がり、隠れたフォントも上から下へ、下から上へ.
フォントサイズも大きくなります.

1.目標

CSS:flexが利用可能です.
練習:https://flexboxfroggy.com/#ko
JS:element classはcssを往復操作できます.addEventListener()・classList.toggle()使用

2.整理

1. flex

.panel:各panelのstyle

.panel {
        background: #6b0f9c;
        box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
        color: white;
        text-align: center;
        align-items: center;
        /* Safari transitionend event.propertyName === flex */
        /* Chrome + FF transitionend event.propertyName === flex-grow */
        transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
          flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
        font-size: 20px;
        background-size: cover;
        background-position: center;
        flex: 1; /* 각 panel들이 차지할 비율을 일정하게. 1*/
        display: flex;
        flex-direction: column; /* flex 적용방향: 세로*/
        justify-content: center; /* flex 자식 중앙정렬*/
      }

display:flex:当該元素をFlex化する.

flex-direction:flex itemのソート方向を決定します.

row, column

justify-content:flex中心軸の位置合わせ基準を決定します.

flex-direction李row綿横column綿縦

上図はflex-direction:row標準

center, flex-start, flex-end, stretch ...

align-items:flex交差軸の位置合わせ基準を決定します.

flex-direction李row綿縦column綿横

上図はflex-direction:row標準

center, flex-start, flex-end, stretch ...

flex : 1:flex項目ごとのスペースの割合を設定する(1)

https://developer.mozilla.org/ko/docs/Web/CSS/flex

2. Element.classList.切り替え(該当する値)

mdnドキュメント
要素クラスに適切な値がない場合は、値を追加します.ある場合は、値を削除します.
CSSと繋がってよく使われているようです.

Javascript

    // panel 펼치기
          // Element.classList.toggle('string')
          // <element class="string"> 클래스 값 추가
          function toggleOpen() {
            this.classList.toggle('open');
          }
    
          // 글자 보이기
          // class: open-active추가
          function toggleActive(e) {
            // transition를 적용한 요소가 2개(font-size, flex-grow)이기 때문에 하나만 event를 적용해야한다
            // this.classList.toggle('open-active');
            if (e.propertyName == 'font-size') {
              this.classList.toggle('open-active');
            }
          }
    
          const panels = document.querySelectorAll('.panel');
    
          // panel 클릭 시 펼치기
          panels.forEach((panel) => panel.addEventListener('click', toggleOpen));
    
          // 변화가 끝나면(transitionend), 위 아래 글씨도 보여주기.
          panels.forEach((panel) =>
            panel.addEventListener('transitionend', toggleActive)

css

    /* 위 아래 문자열 올려진 상태에서 패널이 열리면 내리기*/
          .panel > *:first-child {
            transform: translateY(-100%);
          }
          .panel.open-active > *:first-child {
            transform: translateY(0);
          }
          .panel > *:last-child {
            transform: translateY(100%);
          }
          .panel.open-active > *:last-child {
            transform: translateY(0);
          }

classList.切り替え()はcssに関連し、

addEventListenerクリック時に、呼び出し切り替えによりクラスの作成またはキャンセルの動作を追加します.

上のcssコードによれば、open-activeは切り替えのクラス値として使用される.

open-active不在で字を隠す、あるものは字を現す

3.結論

flexは魅力的です.
このプロジェクトで使用するスキルは、製品の組み合わせを作成するときにも役立ちます.