CSS不定高元素transition动画的解决方案

### 前言
　　CSS中transition可以方便的实现我们的过渡动画效果，但并不是元素的所有属性都可以过渡，那有哪些元素支持动画呢，这里有个列表：

<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties" target="_blank">所有支持transition的属性</a>

这么多属性估计记不住，可以理解成，过渡是只能由元素的值A逐渐变成值B，如果A与B不是一个确切的具体数字，也就无从得知“运动轨迹”，动画则无效。

比如我们不能让A图片过渡变成B图片，因为A图片与B图片一般不是简单的数字变换。

虽然height支持transition,但如果由height: 0;变成height: auto;还是无效的，因为css引擎无法得知auto是多少。

不过我们还是有一些简单的方案可以解决这个问题的。

###场景1 max-height与scaleY展开收起
　　我们有个二级导航，在点击某一级导航时，需展开其下的二级导航，但我们在纯css中无从得到二级导航的个数，但高度不定，一般transition不会生效。

场景1解决方案：使用max-height。 如果能确定最大高度，则直接设置该值；如果不能，确定一个合适的值(什么叫合适值呢？就是较大又不会过大，视业务而定，如果设一个过大的max-height，会因为运行轨迹问题显有卡顿严重)，然后允许有滚动条（如果在移动端的全屏下，滚动条不像pc端这么怪异）
关键代码：
html
```html
<ul class="nav-list">
	<li class="nav-item">
		<div class="nav-name a">blog</div>
		<ul class="sub-nav-list">
			<li class="sub-nav-item">blog 1</li>
			<li class="sub-nav-item">blog 2</li>
			<li class="sub-nav-item">blog 3</li>
		</ul>
	</li>
	<li class="nav-item">
		<div class="nav-name">movie</div>
		<ul class="sub-nav-list">
			<li class="sub-nav-item">movie 1</li>
			<li class="sub-nav-item">movie 2</li>
			<li class="sub-nav-item">movie 3</li>
		</ul>
	</li>
</ul>
```
css:
```css
.sub-nav-list {
	max-height: 0;
	overflow: auto;
	transition: max-height 1s ease-out;
}
.show-sub-nav-list .sub-nav-list {
	max-height: 150px;
}
```

场景1解决方案2：使用scaleY进行缩放，只适用于一个一级导航的情况，否则下面会出现空白。
关键代码：
```css
.sub-nav-list-2 {
	transition: transform 0.4s ease-out;
	transform: scaleY(0);
	transform-origin: top;
}
.show-sub-nav-list .sub-nav-list-2 {
	transform: scaleY(1);
}
```
　　参考demo: <a href="https://www.boatsky.com/static/demo/blog/84-sub-nav-no-height.html" target="_blank">不定高的导航展开动画demo</a>

###场景2，移动端全屏不定高导航下拉动画
　　这应该是一种比较常见的场景，因为全屏，可以使用fixed或absolute，高度可以由0%变成100%，再结合场景1的导航列表，比较简单，唯一需要主要的是，该块设置top，需要设置一个一样高度bottom避免下面少了一块，因为这种场景height: 100%情况下增加top会使得其下移。
　　主要代码：
html
```html
<header class="header">fixed的头部</header>
<section class="nav-wrap">
	<div class="nav-guide">点击展开收起第二个导航</div>
	<div class="nav-list-wrap">
		<ul class="nav-list">
			<li class="nav-item">
				<div class="nav-name">blog (点击展开下一级)</div>
				<ul class="sub-nav-list">
					<li class="sub-nav-item">blog 1</li>
					<li class="sub-nav-item">blog 2</li>
					<li class="sub-nav-item">blog 3</li>
				</ul>
			</li>
			<li class="nav-item">
				<div class="nav-name">movie</div>
				<ul class="sub-nav-list">
					<li class="sub-nav-item">movie 1</li>
					<li class="sub-nav-item">movie 2</li>
				</ul>
			</li>
		</ul>
	</div>
</section>
<section class="content-wrap">
	这是页面内容
</section>
```
CSS：
```css
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #00d586;
	z-index: 5;
}
.nav-wrap {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	top: 40px;
	transition: height 0.4s ease-out;
	background-color: #fff;
}
.nav-guide {
	position: absolute;
	top: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-bottom: 1px solid #ccc;
}
.nav-list-wrap {
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 0;
	width: 100%;
	overflow-y: auto;
}
.show-nav-list {
	height: 100%;
}
```

demo(请使用移动端打开)： <a href="https://www.boatsky.com/static/demo/blog/84-mobile-nav.html" target="_blank">移动端全屏不定高导航下拉动画demo</a>

###提问
##### 为什么我们的非绝对定位元素height不能由0%至100%呢？

规范中写到，如果包含块的高度没有显式指定(如父元素高度为默认值auto)，并且该元素不是绝对定位，则计算值为auto，auto则transition不会生效。

如果觉得有帮忙，您可以在本页底部留言。

CSS不定高元素transition动画的解决方案

全部留言

我要留言