css transition 實現滑入滑出

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比較複雜，提供了幾個預設的：

1. linear，勻速變化。
2. ease，逐漸變慢，預設值就是這個。
3. ease-in，加速變化。
4. ease-out，減速變化。
5. ease-in-out，先加速再減速。
6. 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，效果就是從側邊滑進來了。
}

• 當需要這個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的。

參考文章： http://litianyi.cc/technology/2014/08/27/css-transition/     ease-in 和ease-out 瞭解更多請移步 https://css-tricks.com/ease-out-in-ease-in-out/