Question

我在尝试一些事情时最近注意到了这个“问题”。

说我想创建一个下拉菜单或手风琴。

这是我的HTML：

<div class="wrapper" onclick="toggle()">
  I want to be animated!
  <div class="content">
    Was I revealed in a timely fashion?
  </div>
</div>

样式表：

.wrapper {
  background: red;
  color: white;
  height: auto;
  padding: 12px;
  transition: 2s height;
}

.content {
  display: none;
}

.content.visible {
  display: block;
}

JavaScript的：

function toggle () {
  var content = document.getElementsByClassName('content')[0];

  var test = content.classList.contains('visible');

  test ? content.classList.remove('visible') :
  content.classList.add('visible');
}

当我们切换内容的状态时，我正在努力实现一个漂亮，流畅的动画。显然这不起作用。任何人都可以向我解释为什么它不起作用以及如何解决它？非常感谢。

链接到JSFiddle。

Answer 1

首先，一些CSS属性无法转换，display是其中之一，另外只有离散值可以转换，因此height: auto也不能。

在你的情况下，问题在于height: auto，而有一些hacks用于执行此操作，如果您只是显示和隐藏内容，为什么不添加，并使用jQuery的切换？ / p>

$(".content").toggle("slow");

jsFiddle

- 编辑（没有jQuery） -

因为auto给我们带来了问题，我们可以使用javascript将auto替换为像素值，然后正常使用css转换，如果您的内容没有滚动条，我们可以轻松地从scrollHeight属性中获取该值：

function toggle () {
  var content = document.getElementsByClassName('content')[0];

  var test = content.classList.contains('visible');
  console.log(test);

  if (test) {
    content.classList.remove('visible')
    content.style.height = "0px";
  } else {
    content.classList.add('visible');
    content.style.height = content.scrollHeight + "px";
  } 
}

的CSS

.wrapper {
  background: red;
  color: white;
  height: auto;
  padding: 12px;
  transition: 2s height;
}

.content {
  height: 0px;
  display: block;
  transition: 2s height;
  overflow: hidden;
} /* totally removed .content.visible */

jsFiddle

动画高度属性:: HTML + CSS + JavaScript

1 个答案: