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