CSS实现动态列表的效果

  • 效果展示
  • 要求
  • 思路分析
  • 猜想
  • 猜想出错
  • 解决办法
  • 代码
  • HTML代码
  • CSS代码


效果展示

Themyleaf 动态列表_html5

要求

现要求使用CSS实现如下的页面效果:

  • 列表初始状态仅显示第一个条目内容;
  • 鼠标移动到列表区域后将自动展开内部条目;
  • 鼠标移出该区域后,列表自动回收到初始状态;
  • 要求平滑地实现列表展开与回收的动态效果;

思路分析

猜想

 首先我们肯定需要用到无序列表,其次还需要给列表每一个单元设置相同的宽、高,初始状态列表第一项默认处于显示状态,除第一项外均隐藏(overflow:hidden;),转换时间设为0.5s(transition:0.5s;),当鼠标经过时,打开显示(overflow:visible;)高度增加到所有列表高度之和的数值,过渡时间依旧0.5s,到这里我们就动手去做实现了。

猜想出错

 当你按着这个思路敲下去后,去观察效果却发现不对劲,列表收回时的效果确实正确实现了,但是展开的时候却是直接展开了,没有过渡效果。
 这是因为我们在设置过渡(transition)时没有制定过渡的效果,一方面我们用overflow:visible;直接让列表显示到全部的高度了,另一方面我们又使用了transition过渡,这两者分开使用时是会产生矛盾的,因此只能看到一个效果,不能同时实现。

解决办法

 实际上transition的过渡时我们最好把需要过渡的属性标明,这样不容易出错。
 所以在这里我们有两种解决办法,第一种就是删去overflow属性,并在hover里transition指定height;另一种办法是删去transition属性,在overflow里指定时间,这两种最终所能达到的效果是相同的。
 在这里我们采取的是第二种解决办法。

代码

 经过调试后,我们最终实现了所要达到的效果,具体代码如下。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="csdn.css">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <div class="box_1_1">1</div>
        <div class="box_1_1">2</div>
        <div class="box_1_1">3</div>
        <div class="box_1_1">4</div>
    </div>
</body>
</html>

CSS代码

*{
    padding: 0;
    margin: 0;
}
.box1{
    height: 30px;
    width: 102px;
    background-color: pink;
    font-size: 28px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    transition: 0.5s;
}
.box1:hover{
    height: 120px;
    overflow: visible 0.5s;
    /* transition: height 0.5s; 第一种解决办法*/
}
.box_1_1{
    width: 100px;
    height: 28px;
    line-height: 28px;
    border: 1px solid;
}