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

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

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

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

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

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 创建 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);
  };
1
2
3
4
5
6
7
8
9
10
11
12
13

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

3. 设置 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;
  }
1
2
3
4
5
6

我是 Pandy，一个喜欢英语的程序猿 👨‍💻

关注公众号 Yopth，回复「加群」，加入「翻译互助群」，我们加入一起充电英语 🔌

REFERENCE

[1] How To Do CSS Transitions With Height: Auto