设置 height: auto 却无法触发 transition 动画的解决方案

原创已于 2022-10-16 10:09:15 修改 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-08-01 23:50:43 首次发布

CSS 入门法则专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在CSS中，当元素height设置为auto时，transition无法正常工作的问题，并提出了三种解决方案。方案一利用transform的scaleY，但可能导致内容变形；方案二采用max-height，但需要动态调整；方案三则是通过React获取并设置元素高度，但可能因内容动态变化而不适用。文中以React组件为例展示了如何实现方案三，并提供了相应的CSS样式。

当 height: auto 时，设置 transition 是无法触发动画的，CSS 需要知道具体的 height 值，因此引申其他解决方案：

方案一：使用 transform 的 scaleY，去放大缩小。
- 缺点
  - 内容会变形
  - 会占据原来的内容尺寸
方案二：设置 max-height
- 缺点
  - 随着内容的增加，需要重新考虑设置 max-height 的值
  - transition-timing 是作用在 max-height 上的
方案三：获取元素的 height，重新设置。
- 缺点
  - 非纯 CSS

可以看到，每种方案不优雅，矮个子里拔高。接下来来拔一下方案三，我们将以 React 为例子：

创建一个组件，使用按钮去展开收缩

    <div className={styles.wrapper}>
     <Button className={styles.button} onClick={collapseChange}>
       {isExpand ? "Collapse" : "Expand"}
     </Button>
     <div
       className={clsx(styles.content, isExpand && styles.expanded)}
       style={{
         height: height + "px",
       }}Ï
     >
       <div ref={ref}>{children}</div>
     </div>
   </div>

创建 ref，引用元素，当用户点击展开按钮时，获取元素的高度 height

  const ref = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number>(0);

  const [isExpand, setIsExpanded] = useState(defaultIsExpanded);

  const collapseChange = () => {
    if (isExpand) {
      setHeight(0);
    } else {
      setHeight(ref.current?.clientHeight ?? 0);
    }
    setIsExpanded(!isExpand);
  };

这里可以缓存元素的高度，但是这里业务场景中，子元素的高度可能会动态变化，因此不做缓存。

设置 CSS，当元素高度变化时，触发 transition 动画

  .content {
    grid-column: span 2;
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition-duration: 242ms;
    overflow-y: hidden;
  }