CSS不定高元素transition动画的解决方案
类别： 技术·CSS
时间：2019-07-27 23:41:35
字数：3297
版权所有，未经允许，请勿转载，谢谢合作~
### 前言
CSS中transition可以方便的实现我们的过渡动画效果，但并不是元素的所有属性都可以过渡，那有哪些元素支持动画呢，这里有个列表：
所有支持transition的属性
这么多属性估计记不住，可以理解成，过渡是只能由元素的值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
```
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: 不定高的导航展开动画demo
###场景2，移动端全屏不定高导航下拉动画
这应该是一种比较常见的场景，因为全屏，可以使用fixed或absolute，高度可以由0%变成100%，再结合场景1的导航列表，比较简单，唯一需要主要的是，该块设置top，需要设置一个一样高度bottom避免下面少了一块，因为这种场景height: 100%情况下增加top会使得其下移。
主要代码：
html
```html
fixed的头部
这是页面内容
```
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(请使用移动端打开)： 移动端全屏不定高导航下拉动画demo
###提问
##### 为什么我们的非绝对定位元素height不能由0%至100%呢？
规范中写到，如果包含块的高度没有显式指定(如父元素高度为默认值auto)，并且该元素不是绝对定位，则计算值为auto，auto则transition不会生效。
全部留言
我要留言
内容：
网名：
邮箱：
个人网站：
发表
 - 新增的元素和废除的元素)
-阿里云开发者社区...)
作业2 （精选可编辑）)
