"transition: all 10s"(更改高度)在脚本中不起作用

Question

function myFunction1() {
var a = document.getElementById("hidden_box_tr");
var b = document.getElementById("updown");
var c = document.getElementById("caution");
if (a.style.display === "block") {
a.style.display = "none";
a.style.height = "10px";
b.style.transform = "rotate(90deg)";
c.style.opacity = "0";
} else {
a.style.display = "block";
a.style.height = "150px";
a.style.margin = "0px 0px 88px 0px";
b.style.transform = "rotate(270deg)";
c.style.opacity = "1";
}
}

.caution {opacity:0;}
#hidden_box_tr {color:#453367;
height:10px;
overflow:hidden;
display:none;
transition: all 10s;}

.hidden_box {margin-bottom:20px;}
.toggle_button > p {display:inline-block;
font-weight:bold;
font-size:20px;
margin-bottom:50px;
cursor:pointer;}

#updown {transform: rotate(90deg);
transition: all 1s;}

<div class="toggle_button" onclick="myFunction1()">
<p>click here</p><p id="updown">></p>
</div>
<div class="hidden_box">
<table>
<tr id="hidden_box_tr" >
<td id="caution">test</td>
<td id="caution">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
</td>
</tr>
</table>
</div>

我想把"；过渡：高度10s"；当#hidden_box_tr高度为150px时。现在看起来它突然改变了高度，但我希望它能通过使用过渡非常平稳地改变

但不起作用

任何帮助都将不胜感激！！谢谢

Answer 1

我可以看到两个问题：

1. 转换不适用于显示属性的更改。这是因为没有办法在离散值"none"one_answers"block"之间转换
2. 溢出：隐藏在表中不起作用。这是因为溢出只适用于块元素，但表有自己的显示样式。tr将始终是它的全高，因为这就是表的格式

如果我做了一些小的更改来说明这些问题，那么你可以看到它按预期工作。

function myFunction1() {
var a = document.getElementById("hidden_box_tr");
var b = document.getElementById("updown");
var c = document.getElementById("caution");
if (a.style.height === "150px") {
a.style.height = "10px";
b.style.transform = "rotate(90deg)";
c.style.opacity = "0";
} else {
a.style.height = "150px";
a.style.margin = "0px 0px 88px 0px";
b.style.transform = "rotate(270deg)";
c.style.opacity = "1";
}
}

.caution {opacity:0;}
#hidden_box_tr {color:#453367;
height:10px;
overflow:hidden;
transition: all 10s;}

.hidden_box {margin-bottom:20px;}
.toggle_button > p {display:inline-block;
font-weight:bold;
font-size:20px;
margin-bottom:50px;
cursor:pointer;}

#updown {transform: rotate(90deg);
transition: all 1s;}

<div class="toggle_button" onclick="myFunction1()">
<p>click here</p><p id="updown">></p>
</div>
<div class="hidden_box">
<div>
<div id="hidden_box_tr" >
<div id="caution">test</div>
<div id="caution">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
</div>
</div>

Answer 2

让css控制样式并让js实现动态魔术是一个好习惯，所以我将您的所有样式从脚本中移除，并将其作为父级的条件类(例如body标记(。

因此，在稍微更改代码(阅读末尾的注释(以达到您想要的结果后：

function myFunction1() { 
document.querySelectorAll('body')[0].classList.toggle('show'); 
}

.caution {opacity:0;}
.hidden_box {margin-bottom:20px;}
.hidden_box_tr {
color:#453367;    
transform: scale(0);
max-height: 150px;
margin: 0px 0px 88px 0px;
transition: all 10s;
}
.show .hidden_box tr {
transform: scale(1);    
}
.hidden_box tr td {
opacity: 0;
transition: all 10s;
}
.show .hidden_box tr td {
opacity: 1;
}
.toggle_button {
display:inline-block;
font-weight:bold;
font-size:20px;
margin-bottom:50px;
cursor:pointer;
border: none;
background: transparent;
}          
.toggle_button span {
display:inline-block;
}
#updown {
transform: rotate(90deg);
transition: all 1s;
}   
.show #updown { transform: rotate(270deg); }

<button class="toggle_button" onclick="myFunction1()">
<span>click here</span>
<span id="updown">></span>
</button>
<div class="hidden_box">
<table>
<tr>
<td>test</td>
<td>                    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
</td>
</tr>
</table>
</div>

注意事项：

1. 您得到了重复的id(#小心(-但这与直接回答您的问题
2. 不能对display属性设置动画，也不能对其进行过渡效果
3. 在充当button的div上有一个onclick事件，所以我更改了元素