如何为JavaScript控制的显示/隐藏功能添加1000ms动画？

嘿，我明白你遇到的问题了——你想用平滑动画优化元素的显示/隐藏效果，但之前配置的CSS动画没生效对吧？其实核心是要配合你的JS类切换逻辑来写对CSS过渡规则，咱们一步步来搞定：

核心问题分析 #

你的JS代码是通过给.column元素添加/移除show类来控制显示隐藏的，但如果之前你的CSS里show类只是简单设置display: block，那肯定没法加动画——因为display属性的变化是瞬间的，不支持CSS过渡（transition）。咱们得换用支持过渡的属性来实现平滑效果。

第一步：编写正确的CSS过渡样式 #

把下面的CSS加到你的样式表中，替代之前无效的动画设置：

/* 初始状态：隐藏元素，预设过渡效果 */
.column {
  opacity: 0;
  visibility: hidden;
  /* 绑定过渡属性，时长设置为1000ms */
  transition: opacity 1000ms ease, visibility 1000ms ease;
  /* 可选：如果需要伴随高度展开/收起的动画，可添加以下配置
  max-height: 0;
  overflow: hidden;
  transition: opacity 1000ms ease, visibility 1000ms ease, max-height 1000ms ease;
  */
}

/* 添加show类后的状态：显示元素 */
.column.show {
  opacity: 1;
  visibility: visible;
  /* 可选：如果加了max-height过渡，这里设置一个足够大的值
  max-height: 1000px;
  */
}

第二步：JS代码无需修改（除非你之前用了display控制） #

你现有的JS逻辑完全没问题，它会正确给符合条件的元素切换show类。如果之前你的.column默认样式是display: none，记得把这个去掉，换成上面的opacity:0和visibility:hidden——因为display的变化会直接打断过渡动画。

为什么之前CSS没生效？ #

大概率是你尝试用display: none <-> block来控制显示隐藏，而这个属性不支持CSS过渡动画。用opacity（透明度）+visibility（可见性）的组合，既能实现隐藏时的视觉消失效果，又能完美支持过渡动画；如果需要伴随高度变化的展开/收起，搭配max-height属性就能实现。

效果说明 #

当你点击筛选按钮时，JS会给目标.column添加show类，此时CSS的过渡规则会让元素用1000ms的时间从透明不可见平滑过渡到完全可见；移除show类时则会反向执行淡出动画，实现你想要的效果。

内容的提问来源于stack exchange，提问作者Валери К.