【日常记录】【CSS】css 和 js 实现高度的动画效果，常用于下拉菜单，下拉选项要做动画处理

要使用CSS和JavaScript实现高度变化的动画效果，通常用于下拉菜单或者下拉选项，可以通过以下方式实现：

1. 使用CSS3的过渡属性(transition)来平滑地改变元素的高度。
2. 使用JavaScript来动态改变元素的高度，从而触发CSS过渡效果。

以下是一个简单的示例代码：

HTML:

<div id="dropdown">
  <button id="toggle">Toggle Dropdown</button>
  <div id="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CSS:

#dropdown #menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
 
#dropdown #menu.open {
  max-height: 1000px; /* 足够大，可以容纳下所有的下拉选项 */
}

JavaScript:

document.getElementById('toggle').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  menu.classList.toggle('open');
});

在这个例子中，当用户点击按钮时，JavaScript会切换open类，从而改变#menu的max-height属性，触发CSS过渡效果。如果下拉菜单的内容高度已知，也可以直接设置max-height为具体的数值，而不是使用1000px这样的很大的值。