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>