亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

三國紛爭 2023-07-29 15:41:43
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”?，F在看起來它突然改變了高度，但我希望它通過使用過渡來非常平滑地改變但它不起作用任何幫助將非常感激！謝謝??！
查看完整描述

2 回答

?
一只萌萌小番薯

TA貢獻1795條經驗 獲得超7個贊

我可以看到兩個問題：

  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>


查看完整回答
反對 回復 2023-07-29
?
慕斯709654

TA貢獻1840條經驗 獲得超5個贊

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- 所以我更改了該元素。


查看完整回答
反對 回復 2023-07-29
  • 2 回答
  • 0 關注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號