菜单下拉列表怎么实现慢慢出现效果-----过渡(transition)

时间:2021-04-14 10:08:29

菜单下拉列表怎么实现慢慢出现效果-----过渡(transition)

首先这里用到的知识是transition

过渡:从一种样式逐渐改变为另一种的样式效果

从图来看,是高度发生了变化,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<style>
*{
    padding: 0;margin: 0;
}
    a{text-decoration: none;}
    .nav{
        width: 320px;
        height: 50px;
        margin: 50px auto;
    }
    .nav li{
        float: left;
        width: 100px;
        height: 50px;
        margin-right: 10px;
        background-color: pink;
        line-height: 50px;
        text-align: center;
    }
    .nav .mr0{
        margin-right: 0;
    }
    .nav li a{
        display: block;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 20px;
    }
    .nav > li:nth-child(2){
        position: relative;
    }
    .nav .list{
        position: absolute;
        overflow: hidden;/*必须用overflow,不然内容会挤出去,就算设置高度为零也没意义*/
        top: 50px;
        left: 0;
        height:0;
        transition: 1s;
    }
    .nav > li:nth-child(2):hover .list{
        height: 200px;
        }

    }
</style>
</head>
<body>
    <ul class="nav">
        <li><a href="">首页</a></li>
        <li><a href="">衣服</a>
            <ul class="list">
                <li><a href="">夹克</a></li>
                <li><a href="">衬衫</a></li>
                <li><a href="">羽绒服</a></li>
                <li><a href="">毛线衣</a></li>
            </ul>
        </li>
        <li class="mr0"><a href="">裤子</a></li>
    </ul>
</body>
</html>

下面具体谈谈transition 样式的一种变化,需要注意的是transition不会自己变化,需要配合hover才能变化

1属性

transition-property想要过渡的属性名称,不写就是过渡全部

transition-duration过渡花费的时间

transition-delay 延迟时间,过一下再过渡

transition-timing-function速度曲线   ease(默认,慢速开始,然后加快,结束变慢)  linear(匀速) ease-in(规定以慢速开始的效果)  ease-out(慢速结束的过渡效果) ease-in-out(慢速开始和结束的过渡效果)  ease-in-out和ease的区别是中间加速不一样

复合属性:名称,花费的时间 速度 延迟时间;中间为空格

2transition

能过渡的属性:(想要谁过渡,就在谁原始身上加,不要在变换后加,不能在写hover时加)大小,颜色,透明度,背景图片(有点特殊,是原来图片变淡,另一个图片出来,类似透明度,一般不使用)

不能过渡的属性:display

想要hover后,元素慢慢显示,

如果仅仅是visibility+transition,那么开始和display一样是立即显示,但是和display不一样的是,display在鼠标撤离元素没hover时立即消失,而visibility会过段时间消失

visibility:hidden和display:none的区别

display:none是完全消失,页面hover不到,并且造成其他属性没有效果

visibility:hidden也是消失,但是存在于页面上,也hover不到,并不会影响别的属性。一般配合opacity和position使用,即要从消失到可以慢慢显现,必须用visibility而不是display