下拉列表无法实现过度效果

来源：3-2 作业题

一拍

2020-05-18 13:13:45

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/media.css">
</head>

<body>
    <header class="sm-container">
        <p class="head-title">imooc</p>
        <span class="btn-bar" id="btn"></span>
        <nav class="nav-item" id="nav-item">
            <ul>
                <li><a href="###" class="nav-link">前端</a></li>
                <li><a href="###" class="nav-link">java</a></li>
                <li><a href="###" class="nav-link">ios</a></li>
                <li><a href="###" class="nav-link">Andriod</a></li>
                <li><a href="###" class="nav-link">php</a></li>
            </ul>
        </nav>
    </header>
</body>
<script src="https://s0.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js"></script>
<script src="js/index.js"></script>
</html>

*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 32px;
    margin: 0; 
}

ul li{
    list-style-type:none;
    
}



.sm-container {
    width: 100%;
    height: 1.5rem;
    background-color: #B2C5CC;
    color: #fff;
    position: relative;
}

/* 默认显示手机端 */
.head-title {
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-size: 0.5rem;
    z-index: 10;
}
#btn {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid red;
}
.nav-item {
    z-index: 1;
    position: absolute;
    top: 1.5rem;
    height: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    background: #888;
    transform: height 0.5s;
    -webkit-transform: height 0.5s;
    -moz-transform: height 0.5s;
    -ms-transform: height 0.5s;
    -o-transform: height 0.5s;
}
.nav-item li a {
    color: #fff;
    display: block;
    line-height: 1rem;
    font-size: 0.4rem;
    border-bottom: 1px solid #eee;
}

@media (min-width: 768px) {
    .head-title,
    #btn {
        display: none;
    }
    .nav-item {
        position: static;
        background: none;
        height: 1.5rem;
        line-height: 1.5rem;
    }
    .nav-item li {
        display: inline-block;
        padding: 0 20px;
    }
    .nav-item ul a {
        border: none;
        line-height: 1.5rem;
        font-size: 0.6rem;
        color: #333;
    }
}

var isdown=false;
$('#btn').click(function(){
    if(!isdown){
        $('.nav-item').css('height','auto');
        isdown=true;
    }else{
        $('.nav-item').css('height','0');
        isdown=false;
    }
})

为什么这个transform: height 0.5s; 不行

写回答

1回答