菜菜菜的前端學習日誌 - Day8

transition 轉場

transition 是設置指定元素，在值改變時的轉場能夠透過設定加速度及時間產生不同的轉場效果。

而transition要怎麼設定以及會產生哪些效果呢？
就讓我們來看看吧～

transition屬性

transition有4個屬性能夠設定

1. transition-property：設定要產生轉場效果的屬性，例如：color，font-size，width，height...等
2. transition-duration：設定轉場效果的時間，以秒計算
3. transition-timing-function：設定轉場效果的加速度，能夠設定的值如下

值	效果	示意圖
linear	從效果開始到結束以相同速度進行
ease	效果開始會先加速後再減速至效果結束
ease-in	效果開始會先以緩速開始後再微微加速至效果結束
ease-out	效果開始會先微微加速後在減速至效果結束
ease-in-out	效果開始時會先以緩速開始後加速在減速至效果結束
cubic-bezier(x,x,x,x)	貝茲曲線就能夠透過自訂參數來達到不同的加速度效果，甚至能夠產生超過結束點在回彈的效果

4. transition-delay：設定轉場效果的延遲時間，在幾秒後才執行轉場效果

縮寫

而上述這些transition的屬性也能像background一樣縮寫，寫法如下：

transition：property duration timing-function delay

範例：

transition：color 1s linear 0.5s

我想要讓color在0.5s後以等速的變色，效果時間1s

觸發

而前面有說到，transition是某元素內屬性值改變的轉場效果
所以必須透過一些事件觸發來改變屬性的值
我們可以透過前面提到的偽類選擇器來改變屬性的值
下面就來看一些實際應用吧

Try It

先來寫一些簡單的練習

我們將一個DIV的背景設為黃色，然後設定他的transition是改變他的背景顏色
接下來透過hover來改變背景顏色為紅色

這就完成了第一個轉場效果呢

接下來在做一個複雜一點點兒的
我們來透過checkbox的偽類:checked來讓DIV能夠變大且變色

• [ ] 但是我不喜歡checkbox的框框

所以我們來使用label跟checkbox綁定，然後讓label加點顏色吧

<input type="checkbox" id="test" class="changeColor">
<label for="test">Change</label>

先把checkbox加上id，接下來label使用for就可以跟checkbox綁定囉～

然後再把checkbox屬性設display: none;就看不到了，但是透過點擊label還是能夠讓checkbox被check呢！！

再來就是讓checkbox被check時選擇鄰近的兄弟DIV.test(前面有提到CSS選擇器)，改變屬性的值就可以了。

成果就是這樣了～

接下來我們來玩一點不一樣的

有時會看到選單按鈕可以點擊展開，就讓我們來實做一下吧

首先先把html佈局好

跟上一個練習依樣，我們透過checkbox來控制其他DIV

接下來我們將label美化一下，並且把它定位一下

因為待會兒會把其他DIV藏在這個label的下面，所以用z-index把它的層級提高

再來把其他DIV共同要設定的屬性寫在同一個class

再來設定一下其他每個DIV的顏色跟延遲時間

最後最後就是設定DIV要移動的位置囉～

最後的成果就是這樣

是不是很好玩呢～～