主題

實作一個圖片展開的動畫

成果

完整程式碼
Demo效果

實作重點

CSS

• 先用把畫面調整出來
  • 調整圖片：flex 、flex 佔比為 1
  • 文字置中： flex 、 justify-content 、 align-items 、 flex-direction

Javascript

• 第一段動畫

  • 配合 JS 的 class 和 css 圖片點擊放大：
    • .panel.open : flex 佔比為 5
  • 圖片點擊放大：
    • 使用 toggle 來切換 class open。

  const panels = document.querySelectorAll('.panel');
  
  function clickHandler() {
    this.classList.toggle('open');
  }
  
  panels.forEach(panel => {
    panel.addEventListener("click", clickHandler);
  });
  
  

• 第二段動畫

  • 配合 JS 的 class and css 圖片點擊文字出現：
    • 利用 transform: translate 和 add class 把動畫做出來
  • 上下文字出現：
    • 因為 e 會觸發多個事件，當事件有 flex 時，才觸發 toggle 來切換 open-active

      function transitionHandler(e) {
        if (e.propertyName.includes('flex')) {
          this.classList.toggle('open-active');
        }
      }
  
      panels.forEach(panel => {
        panel.addEventListener("transitionend", transitionHandler);
      });
  

額外知識

• flex 不熟的話有一些小遊戲可以一邊玩一邊變厲害
  • 青蛙遊戲
  • 擊倒海盜 (六角學院出品)
  • 塔防遊戲