# 加碼週

## 額外說明

- 職缺介紹：https://discord.com/channels/801807326054055996/1230451657985232950/1283734513087676461

加碼知識重點：

1. transition, transform, animation 的動態觀念
2. 如何應用動態
1. JavaScript
2. 神奇的技法
3. Animate css
3. 實戰如何導入
1. Off Canvas
2. Loading
3. 常見 Hover 特效

## 動態複習

### Transform 2D 轉換

參考文件：https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform

**常使用的值：**

- translate(x, y)：水平、垂直位移
- scale(x, y)：水平、垂直縮放
- rotate(angle)：2D 旋轉

**樣式特性：**

- 不影響原始位置
- 會自動套用硬體加速，高效能（適合作為動態使用）
- 套用樣式以自身為基準（width、margin 等是以外層容器為基準）

**應用範圍：**

- 直接套用
- 搭配 transition
- 搭配 animation

**Transform 額外特性（新介紹）**
當套用多個 Tranform 屬性時，屬性之間會有先後關係（先旋轉再移動 or 先移動再旋轉）

### Transform 3D(新)

參考範例：https://www.casper.tw/WorkShop-gh-pages/css3d/

**與原本的屬性接近，但多了 Z 軸**
- translateZ：水平、垂直位移
- rotateX, rotateY, rotateZ：3D 旋轉
- scaleX, scaleY, scaleZ：3D 旋轉

使用前的必要結構：

// 父層
.perspective {
  perspective: 500px;
}
// 元素
.box {
  transform-style: preserve-3d;
  transform: ...;
}

## 為你的網站加入互動動態

### 如何讓不動的東西動起來？

1. 使用偽類（[虛擬類別](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes)）hover 加入變動
- 缺點，無法套用在 animation 上
2. 使用 JavaScript
- 缺點，需要寫點 Code

模仿 hover

// mouseover #box-js-hover 時，加入 box-js-hover
document.getElementById('box-js-hover').addEventListener('mouseover', function() {
  this.classList.add('box-js-hover');
});

// mouseout #box-js-hover 時，移除 box-js-hover
document.getElementById('box-js-hover').addEventListener('mouseout', function() {
  this.classList.remove('box-js-hover');
});

點擊加入 animation，注意關鍵的 `animationend`

// 點擊 #box-ani-3 時，加入 box-ani-3  
document.getElementById('box-ani-3').addEventListener('click', function() {
  this.classList.add('box-ani-3');
  // 當旋轉結束時，移除 box-ani-3 
  this.addEventListener('animationend', function() {
    this.classList.remove('box-ani-3');
  });
});

3. 使用偽類（[虛擬類別](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes)）的其他狀態讓它動起來
- 包你們沒見過

### 這些技巧可以怎麼用在實戰上？

**一、Off Canvas**

什麼是 Off Canvas：https://getbootstrap.com/docs/5.3/components/offcanvas/#how-it-works

使用 JavaScript

const toggle = document.getElementById('toggle');
const body = document.body;

// 基礎
toggle.addEventListener('click', () => {
  body.classList.toggle('offcanvas-active');
});

使用純 CSS - 現場示範

**二、CSS Animate**

單一元素套用：

const element = document.querySelector('#card');
element.addEventListener('click', () => {
  element.classList.add('animate__animated', 'animate__rubberBand');
});

element.addEventListener('animationend', () => {
  element.classList.remove('animate__animated', 'animate__rubberBand');
});

多元素套用：

const elements = document.querySelectorAll('.card');
elements.forEach((el) => {
  el.addEventListener('click', function() {
    this.classList.add('animate__animated', 'animate__rubberBand');
  });

  el.addEventListener('animationend', function() {
    this.classList.remove('animate__animated', 'animate__rubberBand');
  });
});

實戰運用層面：

1. 點擊觸發
2. 進出場

## 加碼技巧 - CSS Variables

MDN 文件：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

在哪邊可以看到 CSS Variables

1. 基礎概念，最外層定義變數，內層可進行套用
2. 作用域概念，元素內可以定義屬於自己的變數
3. 核心概念
1. 變數可以再次做計算
2. 變數的值可以被 JS 重新套用