CSS系列——transition属性

3,485 阅读3分钟

友情提示:阅读本文章约需要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);