第一次发博客,有点紧张。首先来一张效果图。
主要是实现了点击右下角的风扇按钮实现了:
导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画。
上源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>扇形导航</title> </head> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #main{ overflow: auto; height: 100%; position: relative; } h1{ color: #1c86e5; text-align: center; } .navigation{ position: fixed; right:5px ; bottom: 5px; height: 40px; width: 40px; } .right-bottom{ height: 40px; width: 40px; position: absolute; border-radius: 50%; z-index: 1; transition: 1.5s; background-color: white; } img{ position: absolute; transition: 1s; } </style> <body> <div id="main"> <h1>扇形导航</h1> <div class="navigation"> <img src="img/衣服.png" width="40"> <img src="img/礼物.png" width="40"> <img src="img/设置.png" width="40"> <img src="img/返回.png" width="40"> <img class="right-bottom" src="img/风扇.png" width="40"> <!-- <div class="right-bottom">--> <!-- </div>--> </div> </div> <script> // 1.在元素首次渲染还没有完成的情况下,是不会触发过渡的 // 2.在绝大部分变换样式切换时,如果变化函数的位置个数、类型不相同也可能不会触发过渡 window.οnlοad=function () { let imgArr=document.getElementsByTagName('img') let flag=true for (let i=0;i<imgArr.length;i++){ imgArr[i].onmousedown=function () { switch (i) { case 0:imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1.5)' imgArr[i].style.opacity=0.3; imgArr[i].style.transition='300ms';break; case 1:imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1.5)' imgArr[i].style.opacity=0.3; imgArr[i].style.transition='300ms';break; case 2:imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1.5)' imgArr[i].style.opacity=0.3; imgArr[i].style.transition='300ms';break; case 3:imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1.5)' imgArr[i].style.opacity=0.3; imgArr[i].style.transition='300ms';break; } } imgArr[i].onmouseup=function () { switch (i) { case 0:setTimeout(function () { imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1)' imgArr[i].style.opacity=1; },300);break; case 1:setTimeout(function () { imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1)' imgArr[i].style.opacity=1; },300);break; case 2:setTimeout(function () { imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1)' imgArr[i].style.opacity=1; },300);break; case 3:setTimeout(function () { imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1)' imgArr[i].style.opacity=1; },300);break; } setTimeout(function () { imgArr[i].style.transition='1s' },400) } } imgArr[4].οnclick=()=>{ if (flag){ for (let i=0;i<imgArr.length-1;i++){ // debugger imgArr[i].style.transition='1s '+(i*0.12)+'s' } imgArr[4].style.transform='rotate(360deg)'; imgArr[0].style.transform='translate(0,-90px) rotate(360deg)' imgArr[1].style.transform='translate(-45px,-80px) rotate(360deg)' imgArr[2].style.transform='translate(-90px,-50px) rotate(360deg)' imgArr[3].style.transform='translate(-100px,0) rotate(360deg)' } else { for (let i=0;i<imgArr.length-1;i++){ imgArr[i].style.transition='1s '+((imgArr.length-i-1)*0.12)+'s' } imgArr[4].style.transform='rotate(0deg)'; imgArr[0].style.transform='translate(0,0) rotate(0deg)' imgArr[1].style.transform='translate(0,0) rotate(0deg)' imgArr[2].style.transform='translate(0,0) rotate(0deg)' imgArr[3].style.transform='translate(0,0) rotate(0deg)' } flag=!flag; } } </script> </body> </html>
主要的坑有:
1.在元素首次渲染还没有完成的情况下,是不会触发过渡的
2.在绝大部分变换样式切换时,如果变化函数的位置个数类型不相同也可能不会触发过渡
3.感觉内存中变化的太快浏览器可能来不及渲染所以采用定时器,等待浏览器渲染
总结:
实现方法有很多,我这边只是一个特别笨拙的方式。
还可以通过通过修改left,top的值来实现。这样可以利用三角函数,定义函数会优雅一些。
图片来自阿里矢量图标库。