height为auto的transition动画

By | 2015/08/16

css3给我们带来了很多美好的东西,比如动画,再也不用使用jQuery来做低效的动画模拟了。不过想来大家也知道css3 transition动画的一些限制,比如说一个高度为auto的div,你是不能够使用transition: height来生成平滑的伸展效果的,按照css3的说法,大概是只有固定值之间,才能使用插帧什么的手段实现,总觉得这个说法有点儿牵强,浏览器难道不知道正常情况下的高度吗?

无奈,我遇到了这个问题,又不想动用js,只好剑走偏锋,想想主意了。

  1. 用js获得高度,暂不考虑;
  2. 用transform实现;
  3. 用max-height实现;

用transform实现是个很精巧的主意,我们知道transform中有scale的属性,可以变换一个元素的尺寸,所以将scale(或者直接scaleY,如果你只想改高度的话)变换应用到transition中,就能实现视觉上的高度变化啦~ 主意我使用了“视觉上”这三个字,因为你直接一试就明白了,transform和relative的布局是一样的,不管你怎么变,你原来占据的空间是一直在那儿的。所以很多时候这个用法并不怎么适用,另外还要记住transform变换的原点,免得中心缩放了。
transition-in-height-auto-1

无奈,使用max-height吧。你会惊喜的发现max-height同样可以在transition中使用,配合overflow:hidden,给一个足够大的max-height,就能比较完美的模拟出height变化的效果了。当然,既然是“模拟”,总有些与正版的差距。稍微考虑下就能想到,如果我们真实的高度比max-height小,那max-height动画展示的时候,直到max-height与真实高度一致为止,你是看不到动画效果的。所以…… 你懂的,收起来的时候感觉动画卡顿了一下,展开的时候倒还好~

我用max-height做了纯css的收缩效果,暂时工作的还好~


发表评论

电子邮件地址不会被公开。 必填项已用*标注