Question

尝试写作“过渡：高度1缓和;”在内部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如下：只关注过渡到工作。

.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

转换仅适用于可以转换为数字的值和已预先在元素上显式设置的值，以便CSS呈现引擎可以确定从起始值到结束值的进度。 inherit不是数字值，因此转换不起作用。

将height:inherit和height:100%课程以及JavaScript中的.departmentShutter更改为.studentShutter。

此外，不需要两个单独的函数来调整两个单独的div元素的大小，因为这两个函数完全相同，只是在不同的元素上。这两个函数可以组合成一个并确定需要调整大小的元素，您只需要使用this关键字，该关键字将绑定到首先发起事件的div。< / p>

最后，不要使用内联HTML事件属性（onclick等）绑定事件处理程序。这就是20年前的做法，但不幸的是它今天仍然被复制和粘贴，所以新用户不知道更好。有 many reasons not to use this technique anymore 。相反，将JavaScript与HTML完全分开，并遵循现代标准进行事件绑定。

＆＃13;

// 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";
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

过渡不适合身高

1 个答案: