CSS学习笔记四：下拉选择框以及其动画特效

以前学的只是了解了css的一些基本属性，在做项目的时候都是直接使用bootstrap响应式来写项目，这样子很方便，很快捷，但是在自己看来还是有一点缺陷的，毕竟，我很多时候不怎么清楚它里面的具体运作。所以在学习原生，一个一个小标符号学习起来，学习原生可能会让我学习到更多的东西。

学习了两种下拉框，一种是往在弹，一种是从中间往外弹。

第一种下拉框

现在学习的做东西，都是先确定好自己需要那几样东西，先把body的内容写了，再来一样一样规划样式。

<div class="content">
        <div class="select ">
            <p>所有选项</p>
            <ul>
                <li data-value="所有选项" class="selected">所有选项</li>
                <li data-value="html">html</li>
                <li data-value="css">css</li>
                <li data-value="javascript">js</li>
                <li data-value="jquery">jq</li>
            </ul>
            
        </div>
        
    </div>

1、body,p,ul本身就自带了边界和内边距的距离，第一步是将他们给清除掉

2、设置body的基本属性值，背景颜色以及字体颜色

3、content是将它们总体往下移

4、content 中的 select 的样式设定设置其边距和边界等等，在after中设置的是一个三角形的样式，一开始是倒三角形，当点击按钮后就会旋转，将按钮往上翻转。

5、select p 中设置的是该处的内边距值和将其如果接触到该处，则鼠标变为手指状 cursor:pointer;。

6、select ul 中是将其本身的样式清楚掉，本来ul中的物品都会带着点，list-style:none;将点去除 ；select ul li 中将每个列都设置好行距。 其中 ul li:hover 是指鼠标划过带来的样式变化，而selected 则是选择它会改变的样式

7、open 样式是在你点击下拉框时，它将高度变大，将所有值都显示出来，其after 时将三角形的转向改变。

8、transition里面带有动画效果 ease-in，ease-out 时值物体滑入滑出。所用时间的长短设置

<style type="text/css">
        body,p,ul{
            margin:0;
            padding:0;
        }
        body{
            background-color: pink;
            color:#333;
        }
        .content{
            padding-top:5%;

        }
        .content .select{
            width: 300px;
            height: 40px;
            margin: 0 auto;
            font-family: "Microsoft Yahei";
            font-size: 16px;
            background-color: #fff;
            position: relative;

        }
        .content .select:after{
            content:'';
            display:block;
            width: 10px;
            height: 10px;
            border-left: 1px #ccc solid;
            border-bottom: 1px #ccc solid;
            position:absolute;
            top:11px;
            right: 12px;
            transform:rotate(-45deg);
            transition: transfrom .3s ease-in,top .3s  ease-out;

        }
        .content .select p{
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }
        .content .select ul{
            list-style-type:none;
            background-color: #fff;
            width: 100%;
            overflow-y:auto;
            position: absolute;;
            top: 40px;
            left: 0;
            max-height: 0;
        }
        .content .select ul li{
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }
        .content .select ul li:hover{
            background-color: #e0e0e0;
        }
        .content .select ul li.selected{
            background-color: #39f;
            color: #fff;
        }
        @-webkit-keyframes slide-down{
            0%{transform: scale(1,0);}
            25%{transform: scale(1,1.2);}
            50%{transform: scale(1,0.85);}
            75%{transform: scale(1,1.05);}
            100%{transform: scale(1,1);}
        }
        .content .select.open ul{
            max-height: 250px;
            transform-origin: 50% 0;
            -webkit-animation:slide-down .5s ease-in;
            transition: max-height .2s ease-out;
        }
        .content .select.open:after{
            transform: rotate(-225deg);
            top: 18px;
            transition: all .3s ease-in;
        }
</style>

一开始是将select跟open 两个样式放一起，但是这样子它就是一直展开的，所以要做到动态效果，就要将open 先去掉，然后点击以后就做出相应反应。

1、第一个函数是点击后，jQuery中利用toggleClass将open的样式添加进去，从而打开样式。

2、第一个函数是值当事件点击触发li 中的将一个更换为data-value,同时一处selected 效果和open效果

3、第三个函数是在你打开该列表后，在整个界面任意的地方点击都能让该下拉框回收，也就是移除open样式。 

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    </script>
<script type="text/javascript">
        $(function(){
            $('.select > p').on('click',function(e){
                $('.select').toggleClass('open');
                e.stopPropagation();
            });
            // 检查是否由这个属性，没就添加样式
            // 绑定单击事件e.stopPropagation();加了以后四处点击都i回收
            $('.select ul li').on('click',function(e){
                var _this = $(this);
                $('.select > p').text(_this.attr('data-value'));
                _this.addClass('selected').siblings().removeClass('selected');
                $('.select').removeClass('open');
                e.stopPropagation();
            });
            $(documnent).on('click',function(){
                $('.select').removeClass('open');
            });
        });
    </script>

打开有惊喜

二、第二种下拉框

第二种下拉框跟第一种相比，区别在与其动画效果，其他并没有太大的变化

这里的动画是一条一条进入，跟第一种全部进入会有不同，所以这里用到了：nth-child ：规定属于其父元素的第一个子元素的每个 li的动画效果；

        .content .select.open ul li:nth-child(1){
            transition: opacity .3s ease-in .05s,transform .3s ease-in .05s;

        }
        .content .select.open ul li:nth-child(2){
            transition: opacity .3s ease-in .1s,transform .3s ease-in .1s;

        }
        .content .select.open ul li:nth-child(3){
            transition: opacity .3s ease-in .15s,transform .3s ease-in .15s;

        }
        .content .select.open ul li:nth-child(4){
            transition: opacity .3s ease-in .20s,transform .3s ease-in .20s;

        }
        .content .select.open ul li:nth-child(5){
            transition: opacity .3s ease-in .25s,transform .3s ease-in .25s;

        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Documnent</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    </script>
    
    <style type="text/css">
        body,p,ul{
            margin:0;
            padding:0;
        }
        body{
            background-color: pink;
            color:#333;
        }
        .content{
            padding-top:20%;

        }
        .content .select{
            width: 300px;
            height: 40px;
            margin: 0 auto;
            font-family: "Microsoft Yahei";
            font-size: 16px;
            background-color: #fff;
            position: relative;

        }
        .content .select >i{
            position: absolute;
            top: 12px;
            right: 10px;
            width: 20px;
            height: 11px;
            border-top:3px #ccc solid;
            border-bottom:3px #ccc solid;
        }
        .content .select >i:after{
            content:'';
            position: absolute;
            top: 4px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #ccc;
        }

        .content .select p{
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }
        .content .select ul{
            list-style-type:none;
            background-color: #fff;
            width: 100%;
            overflow:hidden;
            position: absolute;;
            top: 20px;
            left: 0;
            z-index: 1;
            height: 0;
            transition: height .3s ease-out,top .3s ease-out;
        }
        .content .select ul li{
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
            opacity:0;
            transform: translateX(300px);
            transition: transfrom .3s ease-out;
        }
        .content .select ul li:hover{
            background-color: #e0e0e0;
        }
        .content .select ul li.selected{
            color: #0c9;
        }
        
        .content .select.open ul{
            height: 200px;
            top: -80px;
            transition: all .2s ease-in;
        }
        .content .select.open ul li{
            opacity: 1;
            transform:translateX(0);

        }
        .content .select.open ul li:nth-child(1){
            transition: opacity .3s ease-in .05s,transform .3s ease-in .05s;

        }
        .content .select.open ul li:nth-child(2){
            transition: opacity .3s ease-in .1s,transform .3s ease-in .1s;

        }
        .content .select.open ul li:nth-child(3){
            transition: opacity .3s ease-in .15s,transform .3s ease-in .15s;

        }
        .content .select.open ul li:nth-child(4){
            transition: opacity .3s ease-in .20s,transform .3s ease-in .20s;

        }
        .content .select.open ul li:nth-child(5){
            transition: opacity .3s ease-in .25s,transform .3s ease-in .25s;

        }
        

    </style>
</head>
<body>
    <div class="content">
        <div class="select">
            <p>所有选项</p>
            <i></i>
            <ul>
                <li data-value="所有选项" class="selected">所有选项</li>
                <li data-value="html">html</li>
                <li data-value="css">css</li>
                <li data-value="javascript">js</li>
                <li data-value="jquery">jq</li>
            </ul>
            
        </div>
        
    </div>
    <script type="text/javascript">
        $(function(){
            $('.select > p').on('click',function(e){
                $('.select').toggleClass('open');
                e.stopPropagation();
            });
            // 检查是否由这个属性，没就添加样式
            // 绑定单击事件e.stopPropagation();加了以后四处点击都i回收
            $('.select > ul li').on('click',function(e){
                var _this = $(this);
                $('.select > p').text(_this.attr('data-value'));
                _this.addClass('selected').siblings().removeClass('selected');
                $('.select').removeClass('open');
                e.stopPropagation();
            });
            $(documnent).on('click',function(){
                $('.select').removeClass('open');
            });
        });
    </script>

</body>
</html>