css3动画--顺滑打开下拉筛选列表_css动画设置下拉列表平滑下拉-CSDN博客

本文链接：https://blog.csdn.net/u011019468/article/details/107522764

为了方便，这里直接用鼠标悬停去调试筛选列表的显示隐藏：

不加动画的话，鼠标悬停过去，直挺挺的显示隐藏：

在这里插入图片描述

加动画之后，鼠标悬停过去，显示隐藏就很顺滑了（嗷~ ，我的gif动图没录好，移到绿色那个的时候像手残了，-_-||| ，实际上跟下面那个一样的效果）：

效果这样的：
在这里插入图片描述

关键的 css 属性：

固定高度型 :

   height: 0;
   /* 要设置overflow: hidden; 这样当高度变成0，就能隐藏里面的内容 */
   overflow: hidden;
   transition: all 0.2s ease-in-out;

未知高度型：

   overflow: hidden;
   transition: all 0.2s ease-in-out;
   transform: scaleY(0);
   transform-origin: 50% 0;

具体代码如下：

页面代码：

<body>
    <div class="wrap">
        <div class="filter-header">
            选择银行 △
        </div>
        <div class="filter-block">
            <div class="item">平安银行</div>
            <div class="item">浦发银行</div>
            <div class="item">建设银行</div>
            <div class="item">工商银行</div>
            <div class="item">中国银行</div>
            <div class="item">邮政银行</div>
        </div>
        <br>
        <br>
        <div class="filter-header">
            选择银行 △
        </div>
        <div class="filter-block2">
            <div class="other">下拉筛选的头比如：选择银行 △</div>
            <div class="item">平安银行</div>
            <div class="item">浦发银行</div>
            <div class="item">建设银行</div>
            <div class="item">工商银行</div>
            <div class="item">中国银行</div>
            <div class="item">邮政1银行</div>
            <div class="item">邮政2银行</div>
            <div class="item">邮政3银行</div>
        </div>
    </div>
</body>

为了便于查看，我把这俩不同背景色的样式代码分开写。

第一种：可选项列表布局 —— 固定高度型，已知选项个数，那高度已经知道了直接设置

   .wrap {
       width: 400px;
   }
   .filter-header {
       font-size: 20px;
       font-weight: bold;
       margin-bottom: 10px;
   }
   .filter-block {
       width: 100%;
       height: 0;
       /* 要设置overflow: hidden; 这样当高度变成0，就能隐藏里面的内容 */
       overflow: hidden;
       transition: all 0.2s ease-in-out;
       background-color: rgb(31, 224, 31);
   }
   .filter-block .item{
       height: 30px;
       line-height: 30px;
   }
   .filter-block .item:not(:last-of-type) {
       border-bottom: 1px solid #ccc;
   }
   /* hover 后面这个+  表示 .filter-header 跟 .filter-block 是兄弟 */
   .filter-header:hover+.filter-block {
       height: 180px;
   }

第二种：可选项列表布局 —— 未知高度型，常用从接口拿数据动态渲染

  .wrap {
      width: 400px;
  }
  .filter-header {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
  }
  .filter-block2 {
      width: 100%;
      overflow: hidden;
      transition: all 0.2s ease-in-out;
      background-color: rgb(245, 197, 108);
      transform: scaleY(0);
      transform-origin: 50% 0;
  }
  .filter-block2 .item {
      height: 30px;
      line-height: 30px;
  }
  .filter-block2 .item:not(:last-of-type) {
      border-bottom: 1px solid #ccc;
  }  
  .filter-header:hover+.filter-block2 {
      transform: scaleY(1)
  }