尝试写“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>
最佳答案
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>
关于javascript - 过渡不适用于高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47228983/