搞定不定高度元素展开收起动画，css、js双管齐下，从此告别烦恼

2023-01-08 23:03:42

元素展开收起动画：让你的网页动起来！

在网页设计的魅力世界中，元素的展开收起动画占据着不可或缺的地位。从下拉菜单到折叠面板，这些动画不仅让用户界面更加直观，也为你的网页增添了活力和趣味性。对于初学者来说，实现元素的展开收起动画可能是一个让人头疼的挑战，尤其是当元素高度不定期变化的时候。但是别担心，今天我们将为你揭秘两种巧妙的方法，让你轻松搞定这个难题！

CSS：用过渡和高度属性轻松搞定

如果你是一个钟爱 CSS 的狂热粉丝，那么这种方法正是为你量身定制的。使用 CSS，你可以通过 transition 和 height 属性来实现元素的展开收起动画。

首先，你需要为你的动画元素添加一个 transition 属性，指定动画的持续时间和缓动函数。这就像为你的动画设置一个时间表，告诉它如何随着时间的推移平滑过渡。

.element {
  transition: height 0.5s ease;
}

接下来，使用 height 属性来控制元素的高度。当元素需要展开时，设置 height 为元素的实际高度；当元素需要收起时，将其设置为 0。

.dropdown-menu {
  transition: height 0.5s ease;
  height: 0;
}

.dropdown-menu.open {
  height: 200px;
}

这样，当用户点击下拉菜单按钮时，菜单会优雅地展开，显示其内容；而再次点击时，菜单会收起，消失得无影无踪。

JavaScript：灵活多变的动态动画

如果你追求更灵活、功能更强大的动画，那么 JavaScript 绝对是你的最佳选择。通过使用 JavaScript，你可以动态获取元素的高度，并使用 animate() 方法实现流畅的动画效果。

const panel = document.getElementById('panel');

panel.addEventListener('click', () => {
  if (panel.classList.contains('open')) {
    panel.classList.remove('open');
    panel.style.height = 0;
  } else {
    panel.classList.add('open');
    panel.style.height = panel.scrollHeight + 'px';
  }
});