DAY 5-Flex Panel Gallery

CODE

基本的なインプリメンテーション:カードをクリックすると、カードが大きくなり、上下に隠された文字が表示されます.
1)縦横に交差する.display:flexプロパティをpanels divに割り当てる

横方向の配置:

2)カードごとにあります.panel classにプロパティを追加します.以下に示します.

flex: 1;
justify-content: center;
display: flex;
flex-direction: column;

flex-itemは空白を埋め、flex-itemもflex-cainer->内部要素を垂直に揃え、

を列方向に配置します.
3) .panelクラスのすべての要素に次のプロパティを追加します.

flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;

カードの文字()は、残りの空白領域を同じように割り当てて埋め、空白領域内の横方向と縦方向のすべてを中央に

並べている.
4)プロパティを追加して、カードの最初の文と最後の文がデフォルト状態(クローズ状態)で消え、ステータス(オープン状態)をクリックしたときに表示されます.

.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);
}

.panelclassの最初のサブエレメントと最後のサブエレメントは、それぞれY軸方向に-100%と100%移動します.Open-active classを追加する場合は、それぞれ0と0の

に移動します.
5) .panel.flex:5;アトリビュートの割り当て->オンにすると、カードのサイズを大きくすることができます.
6)JavaScriptタスクを開始します.すべてのpanel classを変数panelに割り当てる

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

7)切替()関数宣言->clickイベント発生時に実行

function toggle() {}

panels.forEach((panel) => {        panel.addEventListener("click", toggle);

8)クリックしたイベントの要素上でOpenクラスをループさせる

function toggle() {
        this.classList.toggle("open");
}

9)アクティブ()関数宣言の切り替え->転送イベントが発生したときに実行されることを確認

function toggleActive(e) {}

panels.forEach((panel) =>
panel.addEventListener("transitionend", toggleActive)
);

10)変換が終了すると、イベントの属性名に「flex」という語が含まれる.パネルクラスにあります.Open classの追加に伴い、カードのサイズが大きくなります(flex:5;)「open-active」をclassListに切り替える

function toggleActive(e) {
        if (e.propertyName.includes("flex")) {
          this.classList.toggle("open-active");
        }
}

私が追加した機能:カードをクリックすると、以前クリックしたカードが自動的に閉じます.

1)closeAllPanel()関数宣言->forEachメソッドを使用して各パネルを巡り、classListから「open」クラスを削除する

function closeAllPanels() {
        panels.forEach((panel) => {
          panel.classList.remove("open");
        });
}

2)スイッチ()関数にcloseAllPanel()関数を追加->classListに「open-active」クラスが含まれている場合は、「open」クラスの追加を回避するためにスイッチ()関数を返して終了します

function toggle() {
        closeAllPanels();
        if (this.classList.contains("open-active")) {
          return;
        }
        this.classList.toggle("open");
}

条件文を追加せずに、「開いているカードを再クリックして閉じようとする」をクリックし、イベント発生->実行の切り替え()実行->closeAllPanel()実行->panelをクリックし、classListからopenclass->toggle()のthisを削除します.classList.切り替え(「open」)を実行し、削除したopenクラスが再解析(追加)されるため、カードを閉じることができません->したがって、open-activeクラスの要素が含まれます.OpencloseAllPanel()関数によってopenclassが削除されましたが、open-active classは削除されていません.

Open-active classはtoggleactive()関数で収集され、open classが削除されると変換終了時にトリガーされます

What I Learned

今回は、特別な技術を学んだというより、関数がどのような仕事をするのかを正確に把握し、いつどのような仕事が起こるのかを正確に知ることが大切です.他の機能を実装する場合、変換イベントが発生した時点が混同され、closeAllPanel()はopenclassを削除したが、切り替え()は発生したくないイベント(?)を再追加した.田野が発生した時に少しうろうろしていたからです.
それでも、Aは一歩一歩、Bは一歩と起こり、Cの発生順序をゆっくりと把握するために努力することで、私たちが自分の意思で実行するコードを書くことができます.
だんだんこの挑戦に感情がわいてきたようです.全行程を完走するまで研究しなければならない.