模拟进度条发现的彩蛋

　　在模拟实现一个进度条的时候，首先想到的方法是控制width(横着的进度条),height(竖着的进度条)。

　　我在这么做的时候遇到了一个问题。高度总是从下到上变换的。如果是倒着来的进度条就不好实现。宽度总是从左到右变话的。如果从右到左也遇到了问题。

　　解决方法如下，设定一个relative的框，内部设定一个 absolute的框来实现进度条，进度条的初始位置根据top，left，bottom，right四个值来确定。

<div class="cont">
        <div class="relative fl box">
            <div class="ctx top"></div>
        </div>
        <div class="relative fr box">
            <div class="ctx bottom"></div>
        </div>
    </div>
    <button >第一个div</button>
    <button >第二个div</button>
    <button class="reset">reset</button>
    <div class="cont">
        <div class="relative bar">
            <div class="progress left"></div>
        </div>
        <div class="relative bar">
            <div class="progress right"></div>
        </div>
    </div>
    <button >第一个div</button>
    <button >第二个div</button>
    <button class="reset">reset</button>

　　通过transition来实现过渡效果

.cont{
            width:600px;
            overflow: hidden;
        }
        .relative{
            position: relative;
        }
        .box{
            width:250px;
            height:300px;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .ctx{
            background-color: #FFF000;
            position: absolute;
            width:100%;
            height:0;
            left:0;
            transition: height .8s linear;
            -webkit-transition: height .8s linear;
        }
        button{
            margin-right: 10px;
            margin-top: 10px;
        }
        .top{
            top:0;
        }
        .bottom{
            bottom:0;
        }
        .left{
            left:0;
        }
        .right{
            right: 0;
        }
        .progress{
            background-color: #FF0000;
            position: absolute;
            width:0%;
            height:100%;
            -webkit-transition: width .8s linear;
            transition: width .8s linear;
        }
        .bar{
            height:30px;
            margin-top: 20px;
        }

　　　　效果如下，demo地址，还不会使用cnblogs的demo示例。http://csywweb.github.io/i/1/index.html

模拟进度条发现的彩蛋

相关推荐