transition(过渡)
- transition-property:过渡属性的名称
- transition-duration:过渡动画所需的时间
- transition-timing-function:变化速度可以不断改变
- transition-delay:延迟时间
注意:
- 第一个可以被解析成时间的值会赋值给transition-duration
- 在元素首次渲染还没有完成的情况下,是不会触发过渡的
- 在绝大部分变换样式切换时,如果变换函数的位置个数不同也不会触发过渡
- 当属性值的列表长度不一致时,跟时间有关的重复列表,transition-timing-function使用默认值
实现扇形导航
效果图
一些Tips
代码实现
css部分
* {
margin: 0;
padding: 0;
}
/* 隐藏滚动条 */
html,
body {
height: 100%;
overflow: hidden;
}
#wrap {
position: fixed;
right: 80px;
bottom: 80px;
width: 50px;
height: 50px;
}
#wrap>.inner {
width: 60px;
height: 60px;
float: left;
background-color: white;
border-radius: 50%;
}
#wrap>.inner>img {
margin: 10px;
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
#wrap>.home {
width: 70px;
height: 70px;
position: absolute;
z-index: 1;
background-color: white;
border-radius: 50%;
}
#wrap>.home>img {
margin: 10px;
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
img {
width: 40px;
height: 40px;
}
html部分
<div id="wrap">
<div class="inner">
<img src="./img/editor.png" alt="" />
<img src="./img/friend.png" alt="" />
<img src="./img/set.png" alt="" />
</div>
<div class="home">
<img src="./img/home.png" alt="" style="width:50px;height:50px;" />
</div>
</div>
js部分
window.onload = function() {
var homeEle = document.querySelector("#wrap>.home>img");
var imgs = document.querySelectorAll("#wrap>.inner>img");
var flag = true;
// 自定义距离
var L = 100;
// 点击弹出扇形导航
homeEle.onclick = function() {
if (flag) {
this.style.transform = "rotate(-720deg)";
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.transition = "1s " + (i * 0.15) + "s"; //每一个相隔(i*0.15)s弹出,
imgs[i].style.transform = "rotate(-720deg) scale(1)"
imgs[i].style.left = -getPoint(L, 90 * i / (imgs.length - 1)).left + "px";
imgs[i].style.top = -getPoint(L, 90 * i / (imgs.length - 1)).top + "px";
}
} else {
this.style.transform = "rotate(0deg) scale(1)";
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.transition = "1s " + ((imgs.length - 1 - i) * 0.1) + "s";
imgs[i].style.transform = "rotate(0deg)"
imgs[i].style.left = 0 + "px";
imgs[i].style.top = 0 + "px";
}
}
flag = !flag
}
// 计算弹出的位置
function getPoint(L, deg) {
var x = Math.round(L * Math.sin(deg * Math.PI / 180));
var y = Math.round(L * Math.cos(deg * Math.PI / 180));
return {
left: x,
top: y
}
}
// 点击特效(放大)
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
this.style.transition = "0.5s";
this.style.transform = "rotate(-720deg) scale(2)";
this.style.opacity = 0.1
// transitionend:每个属性完成过渡时都会触发这个事件
this.addEventListener("transitionend", fn)
}
}
// 特效恢复(缩小为原状)
function fn() {
this.style.transition = "0.3s";
this.style.transform = "rotate(-720deg) scale(1)";
this.style.opacity = 1;
this.removeEventListener("transitionend", fn)
}
}