这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了?

伪代码大概是这样:

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

把它还原成一个实际的 Demo,效果大概是这样(本质想的想法是通过给元素切换它的 .up.down 类,让它实现展开、合上的动画 ):

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

我们期待的效果是这样的:

transition 不支持 height: auto

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

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

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

{
&.up {
height: 0;
}
&.down {
- height: unset;
+ height: 500px;
}
}

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

巧用 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 只是限制文本的最大高度,当容器的实际高度没有达到限制的最大高度,将不会继续变高,看看效果:

CodePen Demo -- the height property transition unwork

小缺陷

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

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

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

最后

好了,一个小细节,希望对你有所帮助,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

CSS 奇技淫巧:动态高度过渡动画的更多相关文章

  1. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  2. CSS 过渡动画

    一.过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 在CSS3 ...

  3. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  4. Css中的变形及过渡动画

    在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...

  5. css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  6. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  7. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  8. 不定高元素的高度transition动画实现

    分析文档描述 CSS 支持动画的属性中的 height 属性如下: height :yes, as a length, percentage or calc() 即:当 height 的值是 leng ...

  9. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  10. CSS3初学篇章_5(背景样式/列表样式/过渡动画)

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

随机推荐

  1. 【原创】轻量级即时通讯技术MobileIMSDK:Android客户端开发指南

    申明:MobileIMSDK 目前为个人维护的原创开源工程,现陆续整理了一些资料,希望对需要的人有用.如需与作者交流,见文章底签名处,互相学习. MobileIMSDK开源工程的代码托管地址请进入 G ...

  2. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  3. Hibernate体系结构的简单介绍

    Hibernate体系结构的简单介绍 1.SessionFactory: 单个数据库映射关系经过编译后的内存镜像,是线程安全的.它是生产Session的工厂,本身需要依赖于ConnectionPeov ...

  4. Java 如何得到 JVM 虚拟机的 System Properties

    Java 6 jps 命令得到进程号 jinfo -sysprops <PID> > sysprops.txt 打开 sysprops.txt 就可以查找 Language Time ...

  5. 看项目得到info_freeCsdn-01闪屏页面

    /** * 渐变展示启动屏 */ private void startAnimation() { Animation aa = new Animation() { }; aa.setDuration( ...

  6. 利用js来实现一些常用的算法

    示例代码中的arr指的是给出的数组,s指的是数组的起始坐标0,end指的是数组的最后一个坐标arr.length-1,n指的是要查找的数字 查找某个值: 1.线性法 function findInAr ...

  7. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  8. MB SD Connect 5 vs 2017 FVDI2 Commander

    Both MB SD C5 and FVDI II are diagnostic and Programmer tools for Mercedes Benz Cars & Trucks.Th ...

  9. TabLayout占不满屏幕所有宽度

    <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_wi ...

  10. Centos7.0进入单用户模式修改root密码

    启动Centos7 ,按空格让其停留在如下界面. 按e进行编辑 在UTF-8后面输入init=/bin/sh 根据提示按ctrl+x 得如下图 输入mount -o remount,rw /  然后输 ...