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);    
复制代码