js实现slidedown

实现SlideDown效果

在JavaScript中实现SlideDown效果可以通过操作元素的height属性和transition属性来完成。以下是几种实现方法：

方法一：使用纯JavaScript

function slideDown(element, duration = 300) {
  element.style.display = 'block';
  const height = element.scrollHeight;
  element.style.overflow = 'hidden';
  element.style.height = '0px';
  element.style.transition = `height ${duration}ms ease`;

  setTimeout(() => {
    element.style.height = `${height}px`;
  }, 10);

  setTimeout(() => {
    element.style.height = '';
    element.style.overflow = '';
  }, duration + 10);
}

方法二：使用CSS动画配合JavaScript

.slide-down {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.slide-down.active {
  max-height: 1000px;
}

function slideDown(element) {
  element.classList.add('active');
}

方法三：使用jQuery

如果项目中已经引入了jQuery，可以直接使用其slideDown方法：

$('#element').slideDown(300);

实现SlideUp效果

对应的SlideUp效果实现如下：

纯JavaScript实现

function slideUp(element, duration = 300) {
  const height = element.scrollHeight;
  element.style.overflow = 'hidden';
  element.style.height = `${height}px`;
  element.style.transition = `height ${duration}ms ease`;

  setTimeout(() => {
    element.style.height = '0px';
  }, 10);

  setTimeout(() => {
    element.style.display = 'none';
    element.style.height = '';
    element.style.overflow = '';
  }, duration + 10);
}

注意事项

1. 确保元素初始状态为display: none或height: 0
2. 过渡效果的时间单位要一致
3. 对于复杂布局，可能需要使用max-height代替height
4. 清除过渡效果后要重置相关样式属性

这些方法都可以根据实际需求进行调整，比如改变过渡时间、缓动函数等参数。