css transition 實現滑入滑出

迪迪的部落格發表於2018-12-19
CSS

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/

相關文章