各位好，相信大家都知道，最近更新 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>;
}
}
最后看看效果
非常的完美
最后我们再看看低版本浏览器的效果
先点构建，我这里配置的构建脚本已经，包含了语法转义和 polyfill，也用了 anujs，因此 react 的兼容性可以不用操心，我们只看 CSS 效果。
我们直接上难度挑战 IE6，我们发现在在 IE6 中没有过渡效果，而是直接隐藏显示，并不影响实际使用，非常地优雅
视频版：【前端如何优雅实现 0到auto 的高度过渡-哔哩哔哩】 https://b23.tv/KBx7UoQ
