“过渡：全部 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

我可以看到两个问题：

1. 转换不适用于显示属性的更改。这是因为无法在离散值“none”和“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（#caution） - 但这与你的问题没有直接关系。

2. 您无法对display属性进行动画处理或过渡效果。

3. 您onclick在 a 上有一个事件div，其作用是button- 所以我更改了该元素。