FIG. 1. Effect
2. The implementation steps, by locating all the pictures overlap, then need to add excessive pop-up picture animation.
3. On the code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 html,body{ 12 height: 100%; 13 overflow: hidden; 14 } 15 #warp{ 16 width: 50px; 17 height: 50px; 18 position: fixed; 19 right: 15px; 20 bottom: 15px; 21 } 22 #warp>.inner{ 23 height: 100%; 24 } 25 #warp>.inner>img{ 26 position: absolute; 27 left: 0px; 28 top: 0px; 29 margin: 4px; 30 border-radius: 50%; 31 } 32 #warp>.home{ 33 width: 100%; 34 z-index: 999; 35 height: 100%; 36 background: url(img/home.png) no-repeat; 37 border-radius: 50%; 38 position: absolute; 39 top: 0; 40 left: 0; 41 transition: 1s; 42 } 43 </style> 44 </head> 45 <body> 46 <div id="warp"> 47 <div class="inner"> 48 <img src="img/clos.png" alt="" /> 49 <img src="img/full.png" alt="" /> 50 <img src="img/open.png" alt="" /> 51 <img src="img/prev.png"Alt = "" /> 52 is < IMG the src = "IMG / refresh.png" Alt = "" /> 53 is </ div > 54 is < div class = "Home" > 55 56 is </ div > 57 is </ div > 58 </ body > 59 < Script type = "text / JavaScript" > 60 / * 61 is * Transition pit 62 is 1 in the case rendered first element is not yet complete, It will not trigger excessive 63 the Transform 64 2 In the majority of conversion if the number of transform functions in the position transformation function is not good is not the same over the trigger 65 * / 66 67 the window.onload = function () { 68 var homeEle = document.querySelector ( " .home " ) ; 69 var imgs = document.querySelectorAll ( " #warp> .inner> IMG " ); 70 // menu is expanded 71 is var In Flag = to true ; 72 var C = 140 ; 73 is / * Step*/ 74 homeEle.onclick=function(){ 75 if(flag){ 76 this.style.transform="rotate(-720deg)"; 77 for(var i=0;i<imgs.length;i++){ 78 imgs[i].style.transition="0.8s "+(i*0.1)+"s" 79 imgs[i].style.left=-getPoint(c,90*i/(imgs.length-1)).x+"px"; 80 imgs[i].style.top=-getPoint(c,90*i/(imgs.length-1)).y+"px"; 81 imgs[i].style.transform="rotate(-360deg) scale(1)"; 82 } 83 84 }else{ 85 this.style.transform="rotate(0deg)"; 86 for(var i=0;i<imgs.length;i++){ 87 imgs[i].style.transition="0.8s "+((imgs.length-i)*0.1)+"s" 88 imgs[i].style.left=0; 89 imgs[i].style.top=0; 90 imgs[i].style.transform="rotate(0deg) scale(1)"; 91 } 92 } 93 flag=!flag; 94 } 95 96 /** 97 * 计算位置 98 */ 99 function getPoint(c,deg){ 100 var x=Math.round(c*Math.sin(deg*Math.PI/180)); 101 var y=Math.round(c*Math.cos(deg*Math.PI/180)); 102 return {x:x,y:y} 103 } 104 /* 105 * 第二步 106 */ 107 function fn(){ 108 this.style.transform="rotate(-360deg) scale(1)"; 109 this.style.opacity=1; 110 //解绑 111 this.removeEventListener("transitionend"); 112 } 113 for(var i=0;i<imgs.length; I ++ ) { 114 // the five pictures of the inner single event 115 imgs [I] .onclick = function () { 1 16 the this .style.transform = " Scale (2) " ; 117 the this .style .opacity = 0.1 ; 1 18 the this .style.transition = " 0.7s " ; 119 // binding event after transitionend 120 the this .addEventListener ( " transitionend " , Fn) 121 } 122 123 } 124 } 125 126 127 </script> 128 </html>
4. to sum up
In the case of transition property first element to be rendered yet completed will not be triggered
For example, after 1 and 2 conversion events are bound to click the trigger, x1 1 is converted to point b is transformed to its original position 1, when the page loads, click on transform 1 to x1, if not perform follow-b conversion to the original position, it is only 1 click once, and after clicking no effect (personal understanding, may be a bit around)
transform most of the transform transfer function if the number is not the same position over transformation function will not be triggered