CSS3的过渡及实现扇形导航transition（过渡）
transition-property：过渡属性的名称
transition-duration：过渡动画所需的时间
transition-timing-function：变化速度可以不断改变
transition-delay：延迟时间
注意：
1. 第⼀个可以被解析成时间的值会赋值给transition-duration
2. 在元素⾸次渲染还没有完成的情况下，是不会触发过渡的
3. 在绝⼤部分变换样式切换时，如果变换函数的位置个数不同也不会触发过渡
4. 当属性值的列表长度不⼀致时，跟时间有关的重复列表，transition-timing-function使⽤默认值实现扇形导航
效果图js控制css3动画触发
⼀些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="" /> </div>
</div>
js部分
var homeEle = document.querySelector("#wrap>.home>img");
var imgs = document.querySelectorAll("#wrap>.inner>img");
var flag =true;
// ⾃定义距离
var L=100;
// 点击弹出扇形导航
if(flag){
ansform ="rotate(-720deg)";
for(var i =0; i < imgs.length; i++){
imgs[i].ansition ="1s "+(i *0.15)+"s";//每⼀个相隔(i*0.15)s弹出，                        imgs[i].ansform ="rotate(-720deg) scale(1)"
imgs[i].style.left =-getPoint(L,90* i /(imgs.length -1)).left +"px";
imgs[i].p =-getPoint(L,90* i /(imgs.length -1)).top +"px";
}
}else{
ansform ="rotate(0deg) scale(1)";
for(var i =0; i < imgs.length; i++){
imgs[i].ansition ="1s "+((imgs.length -1- i)*0.1)+"s";
imgs[i].ansform ="rotate(0deg)"
imgs[i].style.left =0+"px";
imgs[i].p =0+"px";
}
}
flag =!flag
}
// 计算弹出的位置
function getPoint(L, deg){
var x = und(L* Math.sin(deg * Math.PI/180));
var y = und(L* s(deg * Math.PI/180));
return{
left: x,
top: y
}
}
// 点击特效(放⼤)
for(var i =0; i < imgs.length; i++){
imgs[i].onclick=function(){
ansition ="0.5s";
ansform ="rotate(-720deg) scale(2)";
this.style.opacity =0.1
// transitionend：每个属性完成过渡时都会触发这个事件
this.addEventListener("transitionend", fn)
}
}
// 特效恢复(缩⼩为原状)
function fn(){
ansition ="0.3s";
ansform ="rotate(-720deg) scale(1)";
this.style.opacity =1;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。