# 時代雜誌(切版筆記)(transition)

**這次切版的過程有需要製作一些過場的簡單動畫, 所以也有使用到一些transition, 打鐵趁熱在來整理一下規則使用方式及過程。**

## transition 基本語法
**transition 為一個四的屬性的縮寫**

transition: 
  transition-property | transition-duration | 
  transition-timing-function | transition-delay;

* transition-property 指定某個css屬性
像是本次有使用到的transform, opacity, height, 都可以用來做過場動畫, 當然不只這些, [全屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
* transition-duration 整個過場花多久的時間, 預設值為0, 單位為s ms
* transition-timing-function 指的是過場時的速度曲線, 預設為ease本次大多使用到ease-in-out, 還有很多時間函式包括(linear, ease-in, ease-out)
* transition-delay 延遲多久後開始進行過場動畫, 單位為s ms

## 範例


**以右手邊的搜尋欄為例**
1. 搜尋欄包含一個icon與一個input, 設定好基本css後,使用transform:translate(100px); (100px為input的寬度),將input推出螢幕外
e.x.

.searchbar{
  ...
  transform: translate(100px);
}

2. 當事件觸發如:checked時, 在設定搜尋欄transform:translate(0px);
e.x.

.navbar-toggle:checked ~ .searchbar{
  transform: translate(0px);
}

3. 再回頭設定搜尋欄的過場動畫

.searchbar{
  ...
  transform: translate(100px);
  transition: transform .5s ease-in-out
}

## 限制

**1. 必須式確切的數值轉換**
轉換的開始及結束必須為確切的值, 否則將無法轉換
e.x.
height: auto; -> height: 55px;
display: block; -> display: none;
**2. 需要事件觸發, 無法自動發生**
e.x.
需要:focus, :checked 等偽類
或JavaScript控制

[作品連結](https://danielgg1024.github.io/time/)