Question

当我点击div时，我想要第二个div来展开/折叠。这是使用JS，HTML和CSS完成的。现在我希望CSS过渡到动画。

现在，我得到的只是一个跳跃式扩展，可以是滚动（Edge），也可以是等待后的跳转（Chrome，Opera，Firefox）。

我尝试将高度设置为1px而不是0px，但这并没有改变任何内容。

function growDiv(id) {
  var ele = document.getElementById(id);
  if (ele.style.height == '100%') {
    ele.style.height = '0px';
  } else {
    ele.style.height = '100%';
  }
}

.main {
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.secondary {
  -webkit-transition: height .5s ease;
  -moz-transition: height .5s ease;
  -ms-transition: height .5s ease;
  -o-transition: height .5s ease;
  transition: height .5s ease;
  overflow: hidden;
  padding-left: 20px;
  height: 0px;
  cursor: pointer;
}

<div class="main" onclick="growDiv('expandable')">
  Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
  number1,
  <br>number2,
  <br>number3,
  <br>number4.
</div>

Codepen的行为与我所知道的完整网站有关，所以为了更好的衡量标准;这是codepen：http://codepen.io/anon/pen/ezJQjM

Answer 1

来自http://css3.bradshawenterprises.com/animating_height/ 而不是使用100％，只是“让它”通过不限制它来获得自动值。

注意：100px只是“任何大于实际尺寸的数字”

function growDiv(id) {
  var ele = document.getElementById(id);
  if (ele.style.maxHeight != '0vh') {
    ele.style.maxHeight = '0vh';
  } else {
    ele.style.maxHeight = "100vh";
  }
}

.main {
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.secondary {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  overflow: hidden;
  padding-left: 20px;
  cursor: pointer;
}

<div class="main" onclick="growDiv('expandable')">
  Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
  number1,
  <br>number2,
  <br>number3,
  <br>number4.
</div>

编辑：将所有内容更改为VH（视口高度），使其永远不会超过屏幕高度的100％，并将适应任何屏幕的最大高度。还将“style =”max-height：0vh;“切换为元素本身而不是类，因此如果需要，可以使用ele.style取消它（否则您需要设置一个新值来覆盖该类。

Answer 2

你愿意使用jQuery吗？它提供了一些很酷的动画可能性，可以完成你想要做的事情。这只是您方法的一种可能替代方案。

在这里查看我的小提琴：

https://jsfiddle.net/3mo28z1t/11/

x = >26

Answer 3

问题是由切换测量单位引起的，因此从像素到百分比。我可能会做一点不同的事情。

＆＃13;

growDiv = function(id) {
  document.getElementById(id).classList.toggle('expanded');
}

＆＃13;

.main {
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.secondary {
  transition: max-height .5s ease;
  overflow: hidden;
  padding-left: 20px;
  max-height: 0;
  cursor: pointer;
}
.secondary.expanded {
  height: 100%;
  max-height: 100px;
}

＆＃13;

<div class="main" onclick="growDiv('expandable')">
  Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
  number1,
  <br>number2,
  <br>number3,
  <br>number4.
</div>

＆＃13;

您会注意到JS更简单，它更依赖于CSS。

div的CSS转换不具有动画效果

3 个答案: