transition（过渡）

• transition-property：过渡属性的名称
• transition-duration:过渡动画所需的时间
• transition-timing-function：变化速度可以不断改变
• transition-delay：延迟时间

注意：

1. 第一个可以被解析成时间的值会赋值给transition-duration
2. 在元素首次渲染还没有完成的情况下，是不会触发过渡的
3. 在绝大部分变换样式切换时，如果变换函数的位置个数不同也不会触发过渡
4. 当属性值的列表长度不一致时，跟时间有关的重复列表，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)
        }
    }