# 時代雜誌(切版筆記)(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 ## 範例 ![](https://i.imgur.com/jYOy5ya.gif) **以右手邊的搜尋欄為例** 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/)