效果图:
注意:
1、过渡只关系元素的初始状态和结束状态,没有方法可以获取元素在过渡中每一帧的状态
2、元素在初次渲染还没有结束的时候,是没有办法触发过渡的
3、在绝大部分变换样式的切换时,变换组合的个数或位置不一样时,是没有办法触发过渡的
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 50px;
height: 50px;
position: fixed;
right: 15px;
bottom: 15px;
}
.container > .imgs{
height: 100%;
}
.container > .imgs > img{
position: absolute; /*提升层级,img一个比一个层级高,所以图片会叠起来*/
margin: 4px;
border-radius: 50%;
top: 0; /*解决imgsEle一开始出去的问题*/
left: 0;
}
.container > .home{
width: 100%;
height: 100%;
background: url(img/home.png) no-repeat;
position: absolute; /*一旦开启绝对定位,高宽由内容撑开*/
left: 0; /*解决imgs高度百分百时home被挤出去问题*/
top: 0;
z-index: 1; /*如果元素没有开启定位,则z-index不起作用*/
border-radius: 50%;
transition: 2s;
}
</style>
</head>
<body>
<div class="container">
<div class="imgs">
<img src="img/clos.png" />
<img src="img/full.png" />
<img src="img/open.png" />
<img src="img/prev.png" />
<img src="img/refresh.png" />
</div>
<div class="home"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var homeEle = document.querySelector(".home");
var imgsEle = document.querySelectorAll(".container > .imgs > img");
var flag = true;
var c = 140;
/*第二部分*/
function fn(){
this.style.transform = "rotate(-720deg) scale(1)";/*放大*/
this.style.opacity = 1;/*透明度*/
this.style.transition = "0.3s";
this.removeEventListener("transitionend", fn); /*解绑事件*/
}
for (var i = 0; i < imgsEle.length; i++) { /*imgsElm里的img都要有放大,此时img还带着第一部分的延迟和rotate*/
imgsEle[i].onclick = function() {
this.style.transform = "rotate(-720deg) scale(2)";/*放大*/
this.style.opacity = 0.5;/*透明度*/
this.style.transition = "0.5s";/*取消第一部分的延迟*/
/*当点击事件完成时,img还要回到原来状态*/
/*transitionend监测过渡是否完成*/
/*一旦绑上事件,就会一直存在,但是我们不需要该事件一直存在,只希望它点击时触发一次,点击完成,该事件就结束,所以在fn中要解绑*/
this.addEventListener("transitionend", fn);
};
}
/*第一部分*/
homeEle.onclick = function() {
if (flag) {
this.style.transform = "rotate(-720deg)";
for (var i = 0; i < imgsEle.length; i++) {
imgsEle[i].style.transform = "rotate(-720deg) scale(1)";/*出去的时候逆时针转*/
imgsEle[i].style.transition = "1s " +(i*0.1)+"s"; /*每个图标延迟不一样*/
imgsEle[i].style.left = -getPoint(c,90*i/(imgsEle.length-1)).left+"px";
imgsEle[i].style.top = -getPoint(c,90*i/(imgsEle.length-1)).top+"px";
}
} else{
this.style.transform = "rotate(0deg)";
for (var i = 0; i < imgsEle.length; i++) {
imgsEle[i].style.transform = "rotate(0deg) scale(1)";
imgsEle[i].style.transition = "1s " +((imgsEle.length-i-1)*0.1)+"s"; /*每个图标延迟不一样*/
imgsEle[i].style.left = "0px";
imgsEle[i].style.top = "0px";
}
}
flag=!flag;
}
//已知第三边 和 一个角
function getPoint(c,deg){
var x =Math.round(c * Math.sin(deg*Math.PI/180));
var y =Math.round(c * Math.cos(deg*Math.PI/180));
return {left:x,top:y};
}
}
/*在绝大部分transform变换样式切换时,如果变换函数的位置、个数不相同也不会触发过渡*/
/*在一开始点击home,五个图标旋转出去,此时五图标的transform为 rotate(-720deg);
*当点击五图标中的一个之后,它的transform为scale(1);
* 最后再点击home,五个图标的transform又变为rotate(0deg);
* 在这三个过程中,transform变换函数的位置和个数不相同,所以它们的过渡有时不会触发
* 所以最终应将imgsEle[i].style.transform的变换函数写成两个
*/
</script>
</html>