Flex Panels Image Gallery


Posted by wayne201299 on 2023-09-22

做一個畫廊
DEMO

  1. 透過Flex將element水平、置中排列

    display: flex;
    justify-content: center;
    align-items: center;
    
  2. 添加open-active,讓上下的文字上移及下移

    .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%);
    }
    
  3. 為panel添加open,當滑入時放大五倍

    flex: 5;
    
  4. 監聽所有panel,當click事件觸發,為指定panel添加open屬性

    function toggleOpen() {
     this.classList.toggle('open');
    }
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    
  5. 當transition結束時,要將上下的文字滑進來

    const panels = document.querySelectorAll('.panel');
    function toggleActive(e) {
     if (e.propertyName.includes('flex-grow')) {
         this.classList.toggle('open-active');
     }
    }
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
    

知識點

  • translateY 可以垂直移動element
  • cubic-bezier 調整transition動畫效果
  • classList 為每個DOM element 都有的物件,可以用來控制CSS class,
    • classList.add 添加
    • classList.remove 移除
    • classList.contains 檢查是否包含
    • classList.toggle 檢查是否有添加的class,沒有的話則添加,反之則移除
    • classList.length class數量
    • classList.item 回傳對應class

補充資料
translateY - MDN
cubic-bezier
D25 - 走!去瀏覽器吃餅乾 yummy yummy


#css #javascript







Related Posts

HTML 基礎

HTML 基礎

各種開源協議

各種開源協議

從頭打造一個簡單的 Virtual DOM

從頭打造一個簡單的 Virtual DOM


Comments