动态高度过渡动画

Bertha 。 2022-10-25 14:26 165阅读 0赞

# 动态高度过渡动画 #

先看一个demo

![heightransition1][]

本质想的想法是通过给元素切换它的 `.up`，`.down` 类，让它实现展开、合上的动画

{
        height: unset;
        transition: all 0.3s linear;
        will-change: height;
    
        &.up {
            height: 0;
        }
        &.down {
            height: unset;
        }
    }

很奇怪，明明给 `height` 属性设置了 `transition`，为什么过渡动画没有触发，而是直接一步到位展开了呢？

期待的效果是这样的：

![heightransition2][]

## transition 不支持 height: auto ##

当上述代码设置成 `height: unset` 时，实际等同于设置了 `height: auto`，我们的想法是希望这段代码能够容器支持文本的动态高度。每次展开的时候，过渡展开到容器本身的高度即可。

查看规范，究其原因，在于 **CSS transtion 不支持元素的高度为 auto 的变化**。

如果把上述的 `height: unset` 替换成一个具体的高度值，则动画是生效的，譬如：

{
        height: unset;
        transition: height 0.3s linear;
    
        &.up {
            height: 0;
        }
        &.down {
            height: unset;
        }
    }

![heightransition3][]

但是，我们又希望能够做到动态高度的过渡转换，是不是就没有办法了么？

## 巧用 `max-height` 适配动态高度 ##

嘿嘿，这里有一个非常有意思的小技巧。既然不支持 `height: auto`，那我们就另辟蹊径，利用 `max-height` 的特性来做到动态高度的伸缩。

我们改造一下上述代码，将 `height: 0` 替换为 `max-height: 0`，将 `height: auto` 替换成 `max-height: 1000px`，伪代码大概是这个意思：

{
        max-height: 0;
        transition: max-height 0.3s linear;
    
        &.up {
            max-height: 0;
        }
        &.down {
            max-height: 1000px;
        }
    }

我们估算一下实际容器的最大高度，这里的 `1000px` 只需要比最大高度高即可。**但是这里不能设置的太高，最高是贴近最大的使用高度即可**

由于 `max-height` 只是限制文本的最大高度，当容器的实际高度没有达到限制的最大高度，将不会继续变高，看看效果：

![heightransition4][]

### 小缺陷 ###

整体效果还是非常的 Nice 的，当然，可能有两个小缺陷，

1.  如果实际场景中 `max-height` 需要用到并且有其它作用，那么可能这种方法就无法满足需求了
2.  另一个缺点就是视觉上有延迟，和实际高度相差越大越明显。也就是说，如果容器实际高度只有 200px，`max-height` 为 1000px，动画时间为 1s，缓动函数为 linear。实际动画从 0 到 200px 的高度过渡时间只有 0.2s，这一点需要非常注意~

因为本来展开动画是期望将容器的高度用 1s 的时间拉伸至 1000px，实际在 200px 的时候就停止了，所以动画时间只有 0.2 秒。综上，方法是好方法，但是具体使用的时候要需要具体分析。

## 左右切换hover展示 ##

div {
        width: 140px;
        height: 64px;
        transition: .8s transform linear;
    }
    div:hover {
        transform: translate(120px, 0);
    }

![2e1a76ea0843f7732394eb557e1d2f4c.gif][]

[heightransition1]: /images/20221024/ac5aa9db887e4d248d3341afb8cc294e.png
[heightransition2]: /images/20221024/de0ae4520e584079893b1b33e6bfc9c8.png
[heightransition3]: /images/20221024/c0d303b9e5a8409b856d1e083cdb8bfe.png
[heightransition4]: /images/20221024/a040d02086444ebf899681271c5aac71.png
[2e1a76ea0843f7732394eb557e1d2f4c.gif]: /images/20221024/7c68dca7c9954ff198b352216a456ade.png