CSS 如何让auto height完美支持过渡动画?

CSS 如何让auto height完美支持过渡动画?,众所周知,高度在设置成auto​关键词时是不会触发transition过渡动画的,下面是伪代码。,效果如下:,图片,如果希望展开时有过渡动画,例如这样。,图片,Kapture 2023-01-31 at 19.21.02通常是借助 JS 动态去获取元素的高度(还有些麻烦的,需要渲染后才能知道高度)。其实CSS 也有一个巧用max-height适配动态高度的解决方案,下面是伪代码。,有兴趣的可以参考这篇文章:CSS 奇技淫巧:动态高度过渡动画[1],但是有一个局限性,高度差异越大,过渡效果越糟糕,假设元素真实高度只有 100px​,如果 max-height为800px​,那只有前1/8有动画,就像这样。,图片,那么,有没有更好的方式来解决这个问题呢?,当然也是有的,这次就来介绍一个全新的方式来实现动态高度过渡,一起看看吧,grid​布局中有一个全新的fr​单位,用于定义网格轨道大小的弹性系数。grid​布局比较复杂,三言两语不可能说清楚,有兴趣的可以参考grid相关教程,例如,这里简单介绍一下fr单位的用途,比如有这样一个布局。,关键样式如下:,可以得到这样的效果:,图片,这里的repeat(3, 1fr)其实就是1fr 1fr 1fr的简写,表示 3 等分剩余空间。还可以设置在垂直方向上。,效果如下:,图片,也可以改变各自的分配比例。,效果如下:,图片,现在来看一种特殊情况,还可以将分配比例设置为0fr。,效果如下:,图片,是不是有点奇怪,0fr怎么和1fr占比相同呢?,其实这是由grid的最小尺寸规则决定的,此时的最小高度是min-content,也就是由内部文本决定的。如果没有文字,0fr自然就不占空间了,下面是去除文字后的效果。,图片,如果想保留文字并且不占空间怎么办呢?可以直接手动设置最小尺寸。,这样0fr也会不占空间。,图片,还可以借助超出隐藏,彻底隐藏子内容。,效果如下:,图片,应该还是比较容易理解吧,那么和动画有啥关系呢?接着往下看,有同学可能纳闷了,为啥要折腾这个0fr呢?下面就来揭晓。,如果重新设置1fr,子内容又会重新出现。,图片,下面重点来了,grid中的fr单位也是支持过渡动画的(0fr=>1fr )。,效果如下:, 图片 ,由于高度是由内部文本撑开的,也就是高度不确定,而0fr到1fr的过渡变化,相当于实现了 高度不固定的过渡动画。,进一步精简一下,可以实现这样的效果。,图片,这就是高度不固定动画的雏形了,换个文本多一点也完美支持。,图片,Kapture 2023-01-31 at 19.48.37,完整 demo可以查看以下任意链接,现在根据上面的原理来实现两个实例。,首先来看文章最开头的示例,HTML 结构是这样的。,简单修饰一下,应该比较容易,可以得到这样的效果:,图片,然后通过上面的技巧将下拉内容隐藏起来,关键样式如下:,然后通过hover触发显示,也就是改变grid-template-rows。,这样就实现了不定高度的过渡动画。,图片,完整 demo可以查看以下任意链接:,如果仅仅是悬浮窗口,由于是绝对定位,不会影响其他布局,其实是可以用transform scale 进行缩放的,再来看另外一个更加实用的例子,常见的菜单展开收起效果,就像这样。,图片,可以看到,在展开的同时,下方的元素也被挤压下去了,这样效果更加自然,也是transform实现不了的,这里的切换是通过:checked实现的,关键代码如下:,完整 demo可以查看以下任意链接:,下面是一些注意事项。,这里的动画源于grid-template-rows​的变化,也就是0fr​到1fr。,注意,注意,注意,这里的0fr​必须是0fr​,不能是0​或者0px​,必须是fr单位。,图片,下面是改为40px的效果(动画丢失)。,图片,再者,0fr也不支持calc计算,直接被认为不合法。,图片,这意味着,例如你希望默认有一个固定高度(非0),然后展开到自适应高度,这种方法是无法实现过渡动画的,略遗憾,最后再来回顾一下实现关键过程。,主要是利用了grid弹性布局可以实现过渡动画的特点,下面总结一些实现要点,[1]CSS 奇技淫巧:动态高度过渡动画: https://github.com/chokcoco/iCSS/issues/91​。,[2]写给自己看的display: grid布局教程: https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/​。,[3]现代 Web 布局: https://juejin.cn/book/7161370789680250917/section​。,[4]CSS auto height transition (juejin.cn): https://code.juejin.cn/pen/7196535838593777667​。,[5]CSS auto height transition (codepen.io): https://codepen.io/xboxyan/pen/wvxOMeQ​。,[6]CSS auto height transition (runjs.work): https://runjs.work/projects/7649b0bf6a514ad2​。,[7]CSS auto height drop (juejin.cn): https://code.juejin.cn/pen/7196535123288784957​。,[8]CSS auto height drop (codepen.io): https://codepen.io/xboxyan/pen/JjBzGJE​。,[9]CSS auto height drop (runjs.work): https://runjs.work/projects/421934cd37da4d1c​。,[10]CSS auto height menu (juejin.cn): https://code.juejin.cn/pen/7196534760661844026​。,[11]CSS auto height menu (codepen.io): https://codepen.io/xboxyan/pen/jOpJWmo​。,[12]CSS auto height menu (runjs.work): https://runjs.work/projects/2b6cb36b8eb549a5​。

文章版权声明

 1 原创文章作者:cmcc,如若转载,请注明出处: https://www.52hwl.com/19913.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年3月5日 上午12:00
下一篇 2023年3月7日 下午10:34