Javascript 过渡段不适用于高度

尝试在内部CSS、内联CSS和javascript中编写“transition:height 1s ease out；”，但没有任何效果。 我正在使用Chrome（最新版本）。 当我有不同的功能时，比如onmouseover打开快门，onmousecomp关闭快门

<script>

    function departmentShutter(){
        if(document.getElementById("departmentShutter").clientHeight === 100 ){
            document.getElementById("departmentShutter").style.height = "inherit";
        }
        else{
            document.getElementById("departmentShutter").style.height = "100px";
        }
    }

    function studentShutter(){
        if(document.getElementById("studentShutter").clientHeight === 100 ){
            document.getElementById("studentShutter").style.height = "inherit";
        }
        else{
            document.getElementById("studentShutter").style.height = "100px";
        }
    }

</script>

HTML:

部门
学生

转换仅适用于可转换为数字的值和在元素上预先明确设置的值，以便CSS渲染引擎可以确定从开始值到结束值的进度<代码>继承不是数值，因此转换无效

在

.departmentShutter

和

.studentShutter

类以及JavaScript中，将

height:inherit

更改为

height:100%

此外，不需要两个单独的函数来调整两个单独的

div

元素的大小，因为这两个函数在不同的元素上执行完全相同的操作。这两个函数可以组合为一个，要确定需要调整哪个元素的大小，只需使用

this

关键字，它将绑定到最先启动事件的

div

中的任何一个

最后，不要使用内联HTML事件属性（

onclick

等）绑定事件处理程序。20年前它就是这样做的，但不幸的是，今天它一直被复制和粘贴，所以新用户不知道有什么更好的。有。相反，将JavaScript与HTML完全分离，并遵循现代事件绑定标准

//只获取一次DOM引用，以避免过多的DOM扫描
//找到应该可以单击的两个div元素，并将它们放置在一个数组中
var shutters=Array.from（document.queryselectoral（“.departmentShutter.studentShutter”）；
//在数组中循环。。。
百叶窗。forEach（功能（百叶窗）{
//将单击事件处理程序分配给每个
shutter.addEventListener（“点击”），功能（evt）{
//通过阵列循环并重置两个百叶窗的高度
百叶窗。forEach（功能（百叶窗）{
快门.style.height=“100%”；
});
如果（this.clientHeight==100）{
this.style.height=“100%”；
}
否则{
this.style.height=“100px”；
}
});
});
.dashboard{
宽度：100%；
高度：适合的内容；
位置：固定；
}
.仪表板内容{
高度：-可使用webkit填充；
宽度：100%；
保证金：0px 0px 0px 0px；
填充：0px 0px 0px 0px；
溢出-x：自动；
}
.部门{
身高：100%；
宽度：50%；
左：0px；
显示：内联块；
浮动：左；
z指数：0；
位置：固定；
边缘顶部：100px；
}
.学生{
身高：100%；
宽度：50%；
右：0px；
显示：内联块；
浮动：左；
z指数：0；
位置：固定；
边缘顶部：100px；
}
.部门快门{
身高：100%；
过渡段：高度1s放松；
宽度：50%；
左：0px；
显示：内联块；
背景色：#09d；
浮动：左；
z指数：99；
位置：固定；
}
.学生百叶窗{
身高：100%；
过渡段：高度1s放松；
宽度：50%；
右：0px；
显示：内联块；
背景色：#2d0；
浮动：左；
z指数：99；
位置：固定；
}
.部门快门跨度，.学生快门跨度{
字号：5em；
}
.矩形{
高度：200px；
宽度：200px；
背景色：#78015d；
}

部门
学生
您的相关html在哪里？请稍等sorry@IronyStack请检查，您无法设置从非数值到数值的转换动画，即从
inherit
到
100px
，这将是一个立即的变化。我从未明确使用过
inherit
，老实说，我懒得尝试。如果一个元素的父元素设置了一个高度，那么转换对一个具有
height:inherit
的元素不起作用吗？@lexith No（如您所见）<代码>继承

导致计算元素的属性值，而不是预先确定值。转换不能/不能在继承的计算值上工作，它们必须有一个确定的值设置，从开始到结束。@ScottMarcus我又卡住了。我想，如果我点击studentShutter，那么应该关闭departmentShutter，反之亦然，使用JS。你建议在JS中做些什么修改？@ArpanKush我已经更新了答案，可以帮你做到这一点。只需将两侧重置为其原始高度，然后再调整单击的一侧的大小。请将此标记为“答案”。

.dashboard{
    width: 100%;
    height: fit-content;
    position: fixed;
}
.dashboardContent{
    height: -webkit-fill-available;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    overflow-x: auto;
}
.department{
    height: 100%;
    width: 50%;
    left: 0px;
    display: inline-block;
    float: left;
    z-index: 0;
    position: fixed;
    margin-top: 100px;
}
.student{
    height: 100%;
    width: 50%;
    right: 0px;
    display: inline-block;
    float: left;
    z-index: 0;
    position: fixed;
    margin-top: 100px;
}
.departmentShutter{
    height: inherit;
    transition: height 1s ease-out;
    width: 50%;
    left: 0px;
    display: inline-block;
    background-color: #09d;
    float: left;
    z-index: 99;
    position: fixed;
}
.studentShutter{
    height: inherit;
    transition: height 1s ease-out;
    width: 50%;
    right: 0px;
    display: inline-block;
    background-color: #2d0;
    float: left;
    z-index: 99;
    position: fixed;
}
.departmentShutter span,.studentShutter span{
    font-size: 5em;
}
.rectangle{
    height: 200px;
    width: 200px;
    background-color: #78015d;
}    

<div class="dashboard">
    <div class="dashboardContent">

        <div id="departmentShutter" class="departmentShutter cursorPointer disable-selection" onclick="departmentShutter()">
            <span class="center">Department</span>
        </div>
        <div class="department">
            <table>
                <tr>    
                    <td><div class="rectangle"></div></td>
                </tr>
            </table>
        </div>

        <div id="studentShutter" class="studentShutter cursorPointer disable-selection" onclick="studentShutter()">
           <span class="center">Student</span>
        </div>
        <div class="student">
            <table>
                <tr>    
                    <td><div class="rectangle"></div></td>
                </tr>
            </table>
        </div>

    </div>  
</div>