[JS30] - 5) Flex Panel Gallery

8688 ワード
transitionend テキストリンク
これはflexを使用する簡単なプロジェクトです.
他の部分も特に重要な部分ではありませんが、簡単すぎるので、メイン部分を整理するしかありません.

#1 💨


cssはpanel active classに次のプロパティを提供します.

css

    .panel.active{
      flex-basis: 100%;
    }
        .panel p:nth-child(1) {
      transform: translateY(-200%);
    }
        .panel.active p:nth-child(1) {
      transform: translateY(0);
    }

    .panel p:nth-child(3) {
      transform: translateY(200%);
    }

    .panel.active p:nth-child(3){
      transform: translateY(0);
    }
クリックしたパネルに該当するクラスを入れると、画面が拡大されます.

js


const $panels = document.querySelectorAll(".panel");

$panels.forEach((panel)=>panel.addEventListener("click", handleTexts))

function handleTexts (ev) {
  ev.target.classList.toggle('active')
}
しかしこれでは、下のgifのように画面が広がる前にフォントが下がります.

画面を拡大して、時間を調整して、フォントを下げます.

#2 💨 transitionend


css

    .panel p:nth-child(1) {
      transform: translateY(-200%);
    }

    .panel.moveText p:nth-child(1) {
      transform: translateY(0);
    }

    .panel p:nth-child(3) {
      transform: translateY(200%);
    }

    .panel.moveText p:nth-child(3){
      transform: translateY(0);
    }

js

const $panels = document.querySelectorAll(".panel");

$panels.forEach((panel)=>panel.addEventListener("click", panelOpen))
$panels.forEach((panel)=>panel.addEventListener("transitionend", handleTexts))

function panelOpen (ev) {
 ev.target.classList.toggle('active')
}

function handleTexts(ev) {
 ev.target.classList.toggle('moveText')
}
trnasiondを条件に、フォントが画面に入るアクティビティを別途設定しています.
API異常処理-DefaultHandlerExceptionResolver
vs低バージョンバッファの問題について