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

• blog
  • blog 1
  • blog 2
  • blog 3
• movie
  • movie 1
  • movie 2
  • movie 3

```

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不会生效。

全部留言

我要留言

内容：

网名：

邮箱：

个人网站：

发表