Question

我之前发布了一个关于ios /移动浏览器上的CSS转换速度慢的问题，并收到了我的“菜单”的答案。我有工作。你可以找到问题here。

现在我正试图修复其余的过渡。我有一个表单，我试图使其变得动态，如果是，那么回答下面弹出的这些新问题＆＃39;。我遇到的问题是max-height的过渡在ios Safari和Chrome上是超慢/不可用的。

您可以使用jsfiddle here查看以下代码。我想要选择＆＃39;选项＆＃39;弹出按钮下方而不显示按钮之间的任何空格。使用translateY而不是max-height选项时，hiddendiv所在高度的两个按钮之间会有空格。

＆＃39;选项＆＃39; div会有不同的高度，因为每个动态输入的问题数量都不同。

以下是我使用的代码的快速示例：

<input type='button' onclick="toggleoptions('options1')" value="Show Options">
<div id="options1" class="hiddendiv">
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
</div><input type='button' onclick="toggleoptions('options2')" value="Show Options">
<div id="options2" class="hiddendiv">
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
  <input type="text" placeholder="Option here..."><br>
</div>
And more stuff goes here....

<script>
function toggleoptions(forthisdiv) {
var optionsdiv = document.getElementById(forthisdiv);
if(optionsdiv.style.opacity == 0) {
  optionsdiv.style.maxHeight = "1000px";
  optionsdiv.style.opacity = 1;
 }
 else {
  optionsdiv.style.maxHeight = 0;
  optionsdiv.style.opacity = 0;
  }
}
</script>

CSS：

.hiddendiv {
overflow: hidden; 
max-height: 0;
opacity: 0; 
transition: all 1s;
}

移动时CSS过渡自动高度不慢

0 个答案: