您的位置：首页 > Web前端 > CSS

height为auto时候，如何用c3实现动画

2017-09-26 14:55 211 查看
解决方法：使用max-height

css3 transition动画的一些限制，比如说一个高度为auto的div，是不能够使用transition: height来生成平滑的伸展效果的，按照css3的说法，只有固定长度，百分比长度，才能使用插帧什么的手段实现，总觉得这个说法有点儿牵强，浏览器难道不知道正常情况下的高度吗？

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

用js获得高度，暂不考虑；

用transform实现；

用max-height实现；

用transform实现是个很精巧的主意，

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



所以，使用max-height吧。

你会惊喜的发现max-height同样可以在transition中使用，配合overflow:hidden，给一个足够大的max-height，就能比较完美的模拟出height变化的效果了。

当然，既然是“模拟”，总有些与正版的差距。

稍微考虑下就能想到，如果我们真实的高度比max-height小，那max-height动画展示的时候，直到max-height与真实高度一致为止，你是看不到动画效果的。

所以…… 你懂的，收起来的时候感觉动画卡顿了一下，展开的时候倒还好~

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding:0;
}
div{
overflow: hidden;
background-color: orange;
animation: slide 1s forwards;
}
@keyframes slide {
0%{
max-height:0px;
}
100% {
max-height:300px;
}
}
</style>
</head>
<body>
<div>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
<p>我不是height，是max-height</p>
</div>
</body>
</html>


【http://eyehere.net/2015/transition-in-height-auto/】
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3
相关文章推荐
新的分享
章节导航