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

函数myFunction1（）{
var a=document.getElementById（“隐藏的盒子”）；
var b=document.getElementById（“updown”）；
var c=document.getElementById（“注意”）；
如果（a.style.display==“块”）{
a、 style.display=“无”；
a、 style.height=“10px”；
b、 style.transform=“旋转（90度）”；
c、 style.opacity=“0”；
}否则{
a、 style.display=“block”；
a、 style.height=“150px”；
a、 style.margin=“0px 0px 88px 0px”；
b、 style.transform=“旋转（270度）”；
c、 style.opacity=“1”；
}
}

。注意{不透明度：0；}
#隐藏盒颜色：453367；
高度：10px；
溢出：隐藏；
显示：无；
转换：所有10秒；}
.hidden_box{页边距底部：20px；}
.toggle_button>p{display:内联块；
字体大小：粗体；
字体大小：20px；
边缘底部：50px；
游标：指针；}
#上下{变换：旋转（90度）；
转换：所有1；}

单击此处

测试
测试测试
测试
测试
测试
测试
testtesttest
testtesttest

我发现两个问题：

转换不适用于显示特性的更改。这是因为无法在“无”和“块”的离散值之间转换

溢出：隐藏在表中不起作用。这是因为溢出仅适用于块元素，但表有其自己的显示样式。tr将始终是它的全高，因为表就是这样格式化的

如果我做了一些小的改变来解释这些，那么你可以看到它按照预期工作

函数myFunction1（）{
var a=document.getElementById（“隐藏的盒子”）；
var b=document.getElementById（“updown”）；
var c=document.getElementById（“注意”）；
如果（a.style.height==“150px”）{
a、 style.height=“10px”；
b、 style.transform=“旋转（90度）”；
c、 style.opacity=“0”；
}否则{
a、 style.height=“150px”；
a、 style.margin=“0px 0px 88px 0px”；
b、 style.transform=“旋转（270度）”；
c、 style.opacity=“1”；
}
}

。注意{不透明度：0；}
#隐藏盒颜色：453367；
高度：10px；
溢出：隐藏；
转换：所有10秒；}
.hidden_box{页边距底部：20px；}
.toggle_button>p{display:内联块；
字体大小：粗体；
字体大小：20px；
边缘底部：50px；
游标：指针；}
#上下{变换：旋转（90度）；
转换：所有1；}

单击此处

测试
测试测试
测试
测试
测试
测试
testtesttest
testtesttest

让

css

控制样式并让

js

实现动态魔法是一个好习惯，因此我从脚本中删除了所有样式，并将其作为父级的一个条件类（以您的示例为例，

body

标记）

因此，在稍微更改代码（阅读末尾的注释）以实现所需的结果后：

函数myFunction1（）{
document.querySelectorAll（'body'）[0].classList.toggle（'show'）；
}

。注意{不透明度：0；}
.hidden_box{页边距底部：20px；}
.隐藏的盒子{
颜色：#453367；
变换：比例（0）；
最大高度：150像素；
保证金：0px 0px 88px 0px；
过渡：所有10秒；
}
.show.hidden_box tr{
变换：比例（1）；
}
.隐藏箱tr td{
不透明度：0；
过渡：所有10秒；
}
.show.hidden_box tr td{
不透明度：1；
}
.切换按钮{
显示：内联块；
字体大小：粗体；
字体大小：20px；
边缘底部：50px；
光标：指针；
边界：无；
背景：透明；
}          
.切换按钮跨度{
显示：内联块；
}
#上下{
变换：旋转（90度）；
过渡：所有1；
}   
.show#updown{变换：旋转（270度）}

点击这里
>
测试
测试