前端如何优雅实现 0 到 auto 的高度过渡

各位好，相信大家都知道，最近更新 Chrome 已经支持了 0 到 auto 的高度过渡。但是很多人反映这种特性太新了，出于兼容考虑用不了的。而实际上 calc-size 是可以渐进增强的。今天我就给大家表演一下，0 到 auto 的渐进增强兼容所有浏览器。

我们先搭建一个空白工程化项目

这个示例工程。是一个计数器。

import * as React from "react";
import { Component } from "react";

interface AppProps { }
interface AppState {
	count: number;
}

export default class App extends Component<AppProps, AppState> {
	constructor(props: AppProps) {
		super(props);
		this.increase = this.increase.bind(this);
		this.decrease = this.decrease.bind(this);
		this.state = {
			count: 0
		};
	}

	private decrease() {
		this.setState({
			count: this.state.count - 1
		});
	}

	private increase() {
		this.setState({
			count: this.state.count + 1
		});
	}

	render() {
		var { count } = this.state;
		return <>
			<h1>Hello World!</h1>
			<div>
				<button type="button" onClick={this.decrease}>-</button>
				{count}
				<button type="button" onClick={this.increase}>+</button>
			</div>
		</>;
	}
}

接下来我们创建一个组件

这个组件有展开和收起 2 种状态。修改传入的属性，可以切换 className

import * as React from "react";
import { Component } from "react";
import "./CollapseBody.scss";

export interface CollapseBodyProps {
	open?: boolean;
}

export class CollapseBody extends Component<CollapseBodyProps> {
	render() {
		let { open, children } = this.props;
		let classList = ["collapse-body"];
		if(open) {
			classList.push('collapse-body_open');
		} else {
			classList.push('collapse-body_close');
		}
		return <div className={classList.join(" ")}>
			{children}
		</div>;
	}
}

接下来我们引入组件

直接在刚刚的计数器上改一下，这样在计数的时候就会切换展开收起状态。

import * as React from "react";
import { Component } from "react";
import { CollapseBody } from "./Components/Collapse/CollapseBody";

interface AppProps { }
interface AppState {
	count: number;
}

export default class App extends Component<AppProps, AppState> {
	constructor(props: AppProps) {
		super(props);
		this.increase = this.increase.bind(this);
		this.decrease = this.decrease.bind(this);
		this.state = {
			count: 0
		};
	}

	private decrease() {
		this.setState({
			count: this.state.count - 1
		});
	}

	private increase() {
		this.setState({
			count: this.state.count + 1
		});
	}

	render() {
		var { count } = this.state;
		return <>
			<h1>Hello World!</h1>
			<div>
				<button type="button" onClick={this.decrease}>-</button>
				{count}
				<button type="button" onClick={this.increase}>+</button>
			</div>
			<CollapseBody open={count % 2 === 0}>
				asdasdas
			</CollapseBody>
		</>;
	}
}

接下来我们看看效果

我们可以看到按钮时 class 在切换

接下来编写样式

展开时高度是 calc-size (auto , size)；收起时，高度是 0；在加以 transition 和 overflow 就完成了。

我们试一下，在高版本正常过渡，低版本由于不支持 calc-size (auto, size)，于是高度为默认值 auto，没有过渡动画，但是不影响使用。

.collapse-body {
	transition: height .3s;
	overflow-y: hidden;
	height: calc-size(auto, size);
}

.collapse-body_close {
	height: 0;
}

overflow 和 display 优化

上面代码虽然能用但是还不够完美，有 2 个问题。

首先容器含有 overflow：hidden，会导致内部内容被截断，如果内部内容还有 box-shadow，很容易被截掉。最好是只在过渡时含有 overflow：hidden。
还有收起后应当含有 disaplay:none，否则收起后仍然占据体积，在一些情况下会出现不必要的滚动条。

我们可以使用 animation 进行改造。

.collapse-body_close {
	display: none;
}

@supports(height: calc-size(auto, size)) {
	.collapse-body_open {
		animation: collapseBodyIn .3s;
	}

	.collapse-body_close {
		animation: collapseBodyOut .3s;
	}
}

@keyframes collapseBodyIn {
	from {
		overflow-y: hidden;
		height: 0;
	}

	to {
		overflow-y: hidden;
		height: calc-size(auto, size);
	}
}

@keyframes collapseBodyOut {
	from {
		overflow-y: hidden;
		display: block;
		height: calc-size(auto, size);
	}

	to {
		overflow-y: hidden;
		display: block;
		height: 0;
	}
}

出现动画

上面示例首次出现时也有动画，假如不想要首次出现的动画，只有切换时才有动画，可以在组件上控制。

import * as React from "react";
import { Component } from "react";
import "./CollapseBody.scss";

export interface CollapseBodyProps {
	open?: boolean;
}

export class CollapseBody extends Component<CollapseBodyProps> {
	private first = true;
	componentDidMount(): void {
		this.first = false;
	}
	render() {
		let { open, children } = this.props;
		let classList = ["collapse-body"];
		if(!open) {
			classList.push('collapse-body_close');
		} else if(!this.first) {
			classList.push('collapse-body_open');
		}
		return <div className={classList.join(" ")}>
			{children}
		</div>;
	}
}