“过渡：全部 10 秒”（更改高度）在脚本中不起作用

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

                    </td>

                </tr>

            </table>

        </div>

当 #hidden_box_tr 高度为 150px 时，我想添加“transition: height 10s”。现在看起来它突然改变了高度，但我希望它通过使用过渡来非常平滑地改变

但它不起作用

任何帮助将非常感激！谢谢！！

Answer 1

我可以看到两个问题：转换不适用于显示属性的更改。这是因为无法在离散值“none”和“block”之间进行转换。溢出：隐藏在表中不起作用。这是因为溢出仅适用于块元素，但表格有自己的显示样式。tr 将始终是其完整高度，因为这就是表格的格式。如果我做一些小的更改来解决这些问题，那么您可以看到它按预期工作。function myFunction1() {&nbsp; var a = document.getElementById("hidden_box_tr");&nbsp; var b = document.getElementById("updown");&nbsp; var c = document.getElementById("caution");&nbsp; if (a.style.height === "150px") {&nbsp; &nbsp; a.style.height = "10px";&nbsp; &nbsp; b.style.transform = "rotate(90deg)";&nbsp; &nbsp; c.style.opacity = "0";&nbsp; } else {&nbsp; &nbsp; a.style.height = "150px";&nbsp; &nbsp; a.style.margin = "0px 0px 88px 0px";&nbsp; &nbsp; b.style.transform = "rotate(270deg)";&nbsp; &nbsp; c.style.opacity = "1";&nbsp; }}.caution {opacity:0;}#hidden_box_tr {color:#453367;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 10s;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;.hidden_box {margin-bottom:20px;}.toggle_button > p {display:inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size:20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor:pointer;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;#updown {transform: rotate(90deg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transition: all 1s;}&nbsp; &nbsp;<div class="toggle_button" onclick="myFunction1()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>click here</p><p id="updown">></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="hidden_box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="hidden_box_tr" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="caution">test</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="caution">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 2

css控制样式并让它发挥动态魔力是一个好习惯js，因此我将所有样式从脚本中移出，并将其作为父级的有条件类（使用您的示例 - 标签body）。因此，在稍微更改代码后（请阅读最后的注释）以达到您想要的结果：function myFunction1() {&nbsp;&nbsp; document.querySelectorAll('body')[0].classList.toggle('show');&nbsp;}.caution {opacity:0;}.hidden_box {margin-bottom:20px;}.hidden_box_tr {&nbsp; &nbsp; color:#453367;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; transform: scale(0);&nbsp; &nbsp; max-height: 150px;&nbsp; &nbsp; margin: 0px 0px 88px 0px;&nbsp; &nbsp; transition: all 10s;}.show .hidden_box tr {&nbsp; &nbsp; transform: scale(1);&nbsp; &nbsp;&nbsp;}.hidden_box tr td {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transition: all 10s;}.show .hidden_box tr td {&nbsp; &nbsp; opacity: 1;}.toggle_button {&nbsp; &nbsp; display:inline-block;&nbsp; &nbsp; font-weight:bold;&nbsp; &nbsp; font-size:20px;&nbsp; &nbsp; margin-bottom:50px;&nbsp; &nbsp; cursor:pointer;&nbsp; &nbsp; border: none;&nbsp; &nbsp; background: transparent;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;.toggle_button span {&nbsp; &nbsp; display:inline-block;}#updown {&nbsp; &nbsp; transform: rotate(90deg);&nbsp; &nbsp; transition: all 1s;}&nbsp; &nbsp;.show #updown { transform: rotate(270deg); }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button class="toggle_button" onclick="myFunction1()">&nbsp; <span>click here</span>&nbsp; <span id="updown">></span></button><div class="hidden_box"><table>&nbsp; <tr>&nbsp; &nbsp; <td>test</td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </table></div>几点注意事项：你有重复的id（#caution） - 但这与你的问题没有直接关系。您无法对display属性进行动画处理或过渡效果。您onclick在 a 上有一个事件div，其作用是button- 所以我更改了该元素。