css过渡动画属性,css3动画高度变化

　　这个问题源于一个关于掘金的留言，有朋友问，为什么我下面代码的高跃迁动画无效？

　　伪代码是这样的：

　　{ height:unset；过渡：全0.3s线性；意志——变化：身高；向上{高度：0；} .down { height:unset；}}}还原成一个实际的Demo，效果大概是这样的(本质思想是切换其。向上，向下类到元素，这样可以实现展开和关闭的动画):

　　嗯哼？很奇怪，高度属性明明设置为过渡。为什么转场动画不触发，而是直接一步启动？

　　我们预期的效果如下：

transition 不支持 height: auto

　　当上述代码设置为height: unset时，实际上相当于设置height: auto。我们的想法是这段代码可以包含文本的动态高度。每次展开时，它可以过渡地展开到容器本身的高度。

　　检查规格。原因是CSS transtion不支持将元素的高度更改为auto。

　　如果将上面的height: unset替换为特定的高度值，则动画有效，例如：

　　{ .向上{高度：0；} .down { - height:未设置；高度：500px}}

　　然而，我们也希望实现动态过渡。没有出路了吗？

巧用max-height适配动态高度

　　呵呵，这里有个很有意思的招数。由于不支持高度：自动，我们将找到另一种方法来利用最大高度的特性来实现动态高度扩展和收缩。

　　让我们修改上面的代码，将height: 0替换为max-height: 0，将height: auto替换为max-height: 1000px。伪代码大概意思是这样的：

　　{最大高度：0；过渡：最大高度0.3s线性；up { max-height:0；} .down { max-height:1000 px；}}我们来估算一下实际集装箱的最大高度。这里的1000px只需要高于最大高度即可。但是这里不能定的太高。最高接近最大使用高度。我们稍后会谈到原因。

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

　　CodePen演示-高度属性转换无效

小缺陷

　　整体效果还是很好看的。当然，可能有两个小缺陷，

　　如果max-height需要在实际场景中使用，并且具有其他功能，那么这种方法可能不符合要求。另一个缺点是有视觉延迟，与实际高度相差越大越明显。也就是说，如果容器的实际高度只有200px，max-height是1000px，动画时间是1s，缓动函数是线性的。实际上动画从0到200px的转场时间只有0.2s，需要非常注意~因为原来的动画是想把容器的高度在1s内拉伸到1000px，但是实际上在200px就停止了，所以动画时间只有0.2s.综上所述，方法是好的，但使用时需要具体分析。

　　以上就是本文关于css动态高过渡动画效果的实现。更多相关CSS高转场动画内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。