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

Animating height property :: HTML + CSS + JavaScript

本文关键字：HTML+CSS+JavaScript 属性 高度 动画      更新时间：2023-09-26

我最近在尝试一些东西时注意到了这个"问题"。

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

这是我的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。

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

在您的情况下，问题在于height: auto，尽管有一些技巧可以做到这一点，但如果您只是显示和隐藏内容，为什么不添加并使用jQuery的切换呢？

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

jsFiddle

--EDIT（不带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

相关文章：