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

秒速五厘米 2022-02-16 11:59 318阅读 0赞

![滑动效果图][20190614195154192.gif]  
思路：通过给父元素设定固定的宽度和高度以及设置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>
    <body>
    <ul class="ulList">
        <li class="liA">LOVE-Family</li>
        <li><a href="">father</a></li>
        <li><a href="">mother</a></li>
        <li><a href="">brother</a></li>
        <li><a href="">and me</a></li>
    </ul>
    </body>

遇到的问题：中途有给子元素设置悬停让父元素某个样式改变时是没有效果的。可能原因是当设置同一个样式时父元素的优先级高于子元素，所以在子元素上面改变父元素的样式是不可以的。

[20190614195154192.gif]: /images/20220216/4daf61ad58e74f68b581fa171cea399c.png