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>

打开有惊喜