菜单下拉列表怎么实现慢慢出现效果-----过渡（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

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

猜你喜欢