下拉菜单滑动效果(animation实践)

最新推荐文章于 2022-11-07 14:35:11 发布

原创

最新推荐文章于 2022-11-07 14:35:11 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#animation过渡

本文介绍了如何通过设置父元素固定宽高和overflow:hidden属性，实现下拉菜单的滑动效果。难点在于理解视觉上的滑动是父元素高度变化造成的，而实际列表并未移动。在实现过程中，需要注意避免子元素样式影响父元素，因为父元素的样式优先级可能高于子元素。

滑动效果图
思路：通过给父元素设定固定的宽度和高度以及设置overflow:hidden属性将超出的ul li列表隐藏掉。视觉上看到的上下滑动的其实是父元素的高度，而不是ul li列表，列表并没有动过。但视觉上感觉到的就是ul li列表在上下滑动。
完整代码如下：

 <title>下拉菜单滑动效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .ulList{
            width:100px;
            height:27px;
            overflow:hidden;//将超出固定高度的部分给隐藏起来
            margin:auto;
            transition:all 0.5s linear;
        }
        .ulList:hover{
            height:137px;//将父元素高度拉长以让列表包含在内给显示出来
        }
        .ulList>li{
            list-style:none;
            background-color:palegreen;
            text-align:center;
            border:1px solid black;
            height:25px;
            line-height:25px;
        }
        a{
            text-decoration:none;
            color:black;
        }
    </style>
</head>
<b

最低0.47元/天解锁文章