CSS系列——transition屬性

友情提示：閱讀本文章約須要10-15分鐘，讀完若是對您有收穫，記得點贊喲^_^

知識點1：用原生JS實現動態進度條

進度條用兩個div便可實現，代碼以下：

// 外層控制進度條底色、進度條總寬度
<div class="process-wrap">
    // 內層和外層 高度保持一致，內層width = 0（體現進度條變化）
    <div class="process-bar"></div>
</div>
複製代碼

/* 進度條 */
.process-wrap {
    background-color: #ebebeb;
    border-radius: 2px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    height: 10px;
    /* 控制外層總寬 度*/
    width: 70%;
    /* 超出寬度後，隱藏，避免溢出 */
    max-width: 100%;
    overflow: hidden;
}
.process-bar {
    background-image: -webkit-linear-gradient(45deg, #2989d8 32%,#7db9e8 33%,#7db9e8 66%,#2989d8 67%);
    background-image: linear-gradient(45deg, #2989d8 32%,#7db9e8 33%,#7db9e8 66%,#2989d8 67%);
    background: #6088f2;
    background-size: 60px 10px;
    border-radius: 3px;
    height: 10px;
    /* 進度條，用JS改變當前寬度 */
    width: 0;
    /* 控制動畫 */
    transition: width 1s ease-in;
    -moz-transition: width 1s ease-in; /* Firefox 4 */
    -webkit-transition: width 1s ease-in; /* Safari and Chrome */
    -o-transition: width 1s ease-in; /* Opera */
}
複製代碼

原文參考連接

知識點2：transtion屬性

想一下，若是上面的進度條咱們去掉transition屬性，又會有什麼狀況發生？

進度條會一段一段的渲染，很是突兀，用戶體驗很不友好。下面咱們一塊兒來探究一下transition屬性用了什麼魔法，讓CSS能動起來？

transition屬性的意義：在兩個狀態之間實現一種隱式過渡(implicit transitions)。使咱們在更改CSS屬性的時候，能夠控制時間、速度、效果等。

//變化的屬性、持續時間、渲染函數、過多長時間後開始
transition: property duration durationFunc delayTime;
複製代碼

• property：能夠作動畫的屬性，包括width、height、background、backgorundImage、opacity、font、border、color、clip等。

• duration：整個動畫持續的時間，以 秒 作單位。

• durationFunc：動畫變更的路徑函數，ease、linear、step-end、step(num, end)、cubic。

• delayTime：動畫過幾秒之後開始，以 秒 作單位。

若是想在transition動畫結束後，作一些動做，能夠用 transitionend事件(在transition動畫結束後觸發)

• IE10及以上兼容
• webkit下，是webkitTransitionEnd事件
• Firefox下，是mozTransitionEnd事件
• opera下，是oTransitionEnd事件

element.addEventListener('transitionend', callbackFunc, true);
複製代碼

知識點3：transition實例

• 實例1——多個屬性一塊兒動

<div class="multi-box"></div>
複製代碼

.multi-box {
    display: block;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    background-color: #2989d8;
    -webkit-transition: width 2s, height 4s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 4s, background-color 2s, transform 2s;
}
.multi-box:hover {
    background-color: antiquewhite;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
複製代碼

• 實例2——高亮菜單過渡效果

<div class="sidebar">
    <p><a class="menuButton" href="home">Home</a></p>
    <p><a class="menuButton" href="about">About</a></p>
    <p><a class="menuButton" href="contact">Contact</a></p>
    <p><a class="menuButton" href="links">Links</a></p>
</div>
複製代碼

.menuButton {
    display: block;
    margin-bottom: 10px;
    height: 26px;
    width: 100px;
    text-align: center;
    border: 1px solid black;
    font-size: 20px;
    text-decoration: none;
    padding: 2px 4px;

    /* 變化的屬性：hover離開胡，恢復原來的狀態動畫 */
    color: white;
    background-color: grey;
    transition: background-color 1s, color 1s;
}
.menuButton:hover {

    /* 變化的屬性：hover時的動畫 */
    color: black;
    background-color: white;
    transition: background-color 1s, color 1s;
}
複製代碼

• 實例3——過渡效果完成後，彈出內容

// 接實例2
let animationBtn = document.querySelectorAll('.menuButton');
animationBtn.forEach(item => {
    item.addEventListener('webkitTransitionEnd', () => {
        console.log('動畫已結束!');
    }, true);
});
複製代碼

hover後再離開，會發現有4次輸出，由於hover時有兩個屬性發生變化（background-color, color），離開後恢復原狀土，又有兩個屬性發生變化。

• 實例4——點擊某處移動球體

<div id="foo"></div>
複製代碼

#foo {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background:#c00;
    top: 0;
    left: 0;
    -moz-transition: all 1s; 
    -webkit-transition: all 1s;  
    -ms-transition: all 1s;  
    -o-transition: all 1s;  
    transition: all 1s;  
}
複製代碼

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);    
複製代碼