transition是css最簡單的動畫。 通常當一個div屬性變化時，我們會立即看的變化，從舊樣式到新樣式是一瞬間的，嗖嗖嗖！！！但是，如果我希望是慢慢的從一種狀態，轉變成另外一種狀態，怎么辦？ transition可以做到。
第一問：哪些屬性值變化會觸發這個transition呢？
一般常見的有：width, height, opacity, color, z-index, visibility等等很多，這里是所有的：https://developer.mozilla.org/en-US/docs/Web/css/css_animated_properties
第二問：transition的具體用法？
transition是這四個的簡寫：
{
transition-property // 觸發transition的屬性值，默認all
transition-duration // transition執行時間
transition-timing-function // 時間變化函數
transition-delay // 執行transition之前的時間
}
其中第三個transition-timing-function比較復雜，提供了幾個默認的：
- linear，勻速變化。
- ease，逐漸變慢，默認值就是這個。
- ease-in，加速變化。
- ease-out，減速變化。
- ease-in-out，先加速再減速。
- cubic-bezier，自定義變化函數。
使用transition簡寫示例：
{
transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;
transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
}
使用技巧，實現滑入滑出
實現一個元素出現或者消失，有幾種方案：display:none 和opacity:0
使用display的話，不會觸發transition，只能實現“快入快出”
而opacity和visibility可以觸發transition。
到這里大眼一看似乎是可以通過opacity和visibility配合transition實現。具體如何實現呢？
- 首先這個要滑入滑出的div，剛開始並不在頁面上。因此需要初始化：
div{
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-ms-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
visibility: 0;
opacity: 0;
width: 0; // 由於是滑入，因此需要這個div的寬度從0慢慢變大，變到300px，效果就是從側邊滑進來了。
}
資源網站大全 https://55wd.com 我的007辦公資源網站 https://www.wode007.com
- 當需要這個div滑入的時候，需要使用js動態給這個div添加一個class："active"
.active {
opacity: 1;
visibility: 1;
width: 300px;
}
一定要記住，是width等這些屬性變化時，才會觸發，因此需要設置一個初始的狀態，再設置一個最終的狀態，我在這里是通過js動態添加class實現設置最終狀態的。你也可以給hover設置不同狀態。
我的完整css代碼：
.detail_wrap{ // 這是初始狀態
transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
width: 0;
height: '80%';
visibility: 0;
opacity: 0;
}
.active { // 這是滑入狀態
opacity: 1;
visibility: 1;
width: 300px;
啊，或許你會問，這不是滑入嗎？怎么沒有滑出呢？
當當當當~ 奧妙在與我使用了一個flag來動態判斷要不要加上active 這個class。這樣的話，active 添加或者消失，都可以觸發這個transition的。