不定高元素动画实现方案（中）

前情

最近小程序接了一个需求，需要实现一个列表，列表可展开收起，展开收起需要有一个动画效果，而列表个数不定且每项内容高度也不固定，所以是一个不定高的收起展开效果，于是特意抽时间尝试了一些动画实现方案，特此记录

通过scale来实现

通过css3的transform:scaleY()来实现，就是设置内容的缩放从0到1,这里有一个小技巧，默认缩放是相对于元素的正中心，这里要设置相对于顶边来实现动画，通过transform-origin来修改变换中心点

关键代码如下：

html 复制代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="container">

    <div class="inner">

      <div class="header">header</div>

      <ul class="list">

        <li>scale111111111</li>

        <li>scale2222222222</li>

        <li>scale333333333</li>

        <li>scale444444444</li>

      </ul>

    </div>

  </div>

</body>

</html>

css 复制代码

*{

  margin: 0;

  padding: 0;

}

.container{

  width: 100%;

  overflow: hidden;

}

.container:hover .list{

  transform:scaleY(1)

}

.header{

  width: 100%;

  height: 48px;

  background-color: #ccc;

  display: flex;

  align-items: center;

  justify-content: center;

}

.list{

  background-color: green;

  transition: transform .4s;

  transform:scaleY(0);

  transform-origin:top center;

}

演示地址：jsbin.com/haxatotohi/...

注意：

此缩放属性兼容性已经非常好了，可以大但使用，但是它的动画方式相比修改亮度过渡不是特别好看，能看到内容明显的压扁缩放过程，但是它是性能最好的，因为修改transform不会引起回流，如果这种效果产品能接受，优先使用此种方式

通过interpolate-size来实现

interpolate-size属性允许在 CSS 中对尺寸相关的属性进行插值计算，从而实现过渡动画效果

可设置的属性有两个值：numeric-only（数字） 和 allow-keywords（关键字）

默认过渡动画只能针对数字，如果想对如auto/fill-content/max-content等关键字做动画就得把interpolate-size设置为allow-keywords

代码如下:

html 复制代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="container">

    <div class="inner">

      <div class="header">header</div>

      <ul class="list">

        <li>interpolate-size111111111</li>

        <li>interpolate-size2222222222</li>

        <li>interpolate-size333333333</li>

        <li>interpolate-size444444444</li>

      </ul>

    </div>

  </div>

</body>

</html>

html 复制代码

*{

  margin: 0;

  padding: 0;

}

.container{

  width: 100%;

  height: 48px;

  overflow: hidden;

  transition:all .4s;

  interpolate-size: allow-keywords

}

.container:hover{

  height: auto;

}

.header{

  width: 100%;

  height: 48px;

  background-color: #ccc;

  display: flex;

  align-items: center;

  justify-content: center;

}

.list{

  background-color: green;

}

演示地址：jsbin.com/nucinaleva/...

注意：

interpolate-size是新出的css就是为了解决关键词过渡动画的，但目前兼容性非常差，如果你是做后台管理项目或者electron桌面端项目可以用用，当然用在项目中也是无防的对于支持的就有过渡，不支持的就无过渡，这叫做优雅降级

通过calc-size来实现

calc-size() CSS function 允许您对固有值执行计算，例如 auto 、 fit-content 和 max-content ；常规 calc() 函数不支持此功能

calc-size() 返回值也可以是插值的，从而允许在 animations 和 transitions 中使用 size 关键字值。实际上，在属性值中包含 calc-size() 会自动将 interpolate-size: allow-keywords 应用于选择

关键代码如下：

html 复制代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="container">

    <div class="inner">

      <div class="header">header</div>

      <ul class="list">

        <li>calc-size111111111</li>

        <li>calc-size2222222222</li>

        <li>calc-size333333333</li>

        <li>calc-size444444444</li>

      </ul>

    </div>

  </div>

</body>

</html>

css 复制代码

*{

  margin: 0;

  padding: 0;

}

.container{

  width: 100%;

  height: 48px;

  overflow: hidden;

  transition:all .4s;

}

.container:hover{

  height: calc-size(auto, size);

}

.header{

  width: 100%;

  height: 48px;

  background-color: #ccc;

  display: flex;

  align-items: center;

  justify-content: center;

}

.list{

  background-color: green;

}

演示地址：jsbin.com/gedezajoni/...

注意：

兼容性有些差，如果你是做后台管理项目或者electron桌面端项目可以用用，当然用在项目中也是无防的对于支持的就有过渡，不支持的就无过渡，这叫做优雅降级

小结

对于做技术的我们，每天都是提出问题解决问题的一个过程，过程中会尝试各种方案，因为解决问题的方案千千万，此篇文章记录了实现不定高内容过渡效果的另外三种实现方式，怕篇幅太长，此文暂时写这么多，下篇继续......