javascript - 过渡不适用于高度

Question

尝试写“transition: height 1s ease-out;”在内部 CSS、内联 CSS、javascript 中，但没有任何效果。我正在使用 Chrome(目前最新)。当我有不同的功能时它会起作用，比如 onmouseover 打开快门和 onmouseclick 关闭它。

<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>

CSS如下:Just focus on transition to work.

.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;
}    

HTML:

<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>

Answer 1

Transitions 仅适用于可以转换为数字的值和预先明确设置在元素上的值，以便 CSS 渲染引擎可以确定从起始值到结束值的进展。 inherit不是数字值，因此转换不起作用。

更改 height:inherit至 height:100%在.departmentShutter和 .studentShutter类以及 JavaScript。

此外，不需要两个单独的函数来调整两个单独的 div 的大小。元素，因为这两个函数做完全相同的事情，只是在不同的元素上。这两个函数可以合二为一，确定哪个元素需要调整大小，你只需要使用this。关键字，将绑定(bind)到 div第一时间发起了这次事件。

最后，不要使用内联 HTML 事件属性(onclick 等)来绑定(bind)您的事件处理程序。这就是 20 年前的做法，但不幸的是，今天它只是不断被复制和粘贴，所以新用户并不了解。有 many reasons not to use this technique anymore 。相反，将 JavaScript 与 HTML 完全分开，并遵循事件绑定(bind)的现代标准。

// Get your DOM refernces just once to avoid excessive DOM scans
// Find both div elements that should be clickable and place them both in an array
var shutters = Array.from(document.querySelectorAll(".departmentShutter, .studentShutter"));

// Loop through the array...
shutters.forEach(function(shutter){
  // Assign a click event handler to each
  shutter.addEventListener("click", function(evt){
  
    // Loop through array and reset heights of both shutters
    shutters.forEach(function(shutter){ 
      shutter.style.height= "100%";
    });
    
    if (this.clientHeight === 100) {
      this.style.height = "100%";
    }
    else {
      this.style.height = "100px";
    }
  });
});

.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: 100%;
  transition: height 1s ease-out;
  width: 50%;
  left: 0px;
  display: inline-block;
  background-color: #09d;
  float: left;
  z-index: 99;
  position: fixed;
}

.studentShutter {
  height: 100%;
  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 percentHeight">
      <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 percentHeight">
      <span class="center">Student</span>
    </div>
    <div class="student">
      <table>
        <tr>
          <td><div class="rectangle"></div></td>
        </tr>
      </table>
    </div>

  </div>
</div>