css实现元素展开收起时能有明显的高度滑动效果

最新推荐文章于 2023-07-31 10:17:01 发布

w15228212327_cc

最新推荐文章于 2023-07-31 10:17:01 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/w15228212327_cc/article/details/110864672

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

传统实现可以使用 jQuery 的 slideUp()/ slideDown()方法，但是，在移动端，

因为 CSS3 动画支持良好，所以移动端的 JavaScript 框架都是没有动画模块的。

此时，使用 CSS 实现动画就成了最佳的技术选型

我们的第一反应就是使用 height + overflow:hidden 实现。

但是，很多时候，我们展开的元素内容是动态的，换句话说高度是不固定的，

因此，height 使用的值是默认的 auto，应该都知道的 auto 是个关键字值，

并非数值，正如 height:100%的 100%无法和 auto 相计算一样，从 0px 到 auto 也是无法计算的，

因此无法形成过渡或动画效果。因此，下面代码呈现的效果也是生硬地展开和收起：

.element { height: 0; overflow: hidden; transition: height .25s; } 
.element.active { height: auto;}

没有 transition 效果，只是生硬地展开

难道就没有什么一劳永逸的实现方法吗？

有，不妨试试 max-height，CSS 代码如下：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
 .element {
  width:200px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s;
}
:checked ~ .element {
  max-height: 666px;
}
</style>
</head>
 <body>
    <input id="check" type="checkbox">
    <p>个人觉得，...</p>
	<div class="element">
	  <p>display:table-cell其他一些应用，例如，两栏自适应布局，
	  垂直居中效果等等都是可以通过其他技术手段模拟出来的，
	  但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，
	  尤其当需要兼容IE8浏览器的时候。</p>
	</div>
	<label for="check" class="check-in">更多↓</label>
	<label for="check" class="check-out">收起↑</label>
 </body>
</html>

但是，使用此方法也有一点要注意，即虽然说从适用范围讲，max- height 值越大使用场景越多，但是，如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问题，比方说，我们展开的元素高度是 100 像素，而 max-height 是 1000 像素，动画时间是 250 ms，假设我们动画函数是线性的，则前 225 ms 我们是看不到收起效果的，因为 max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动画延迟 225 ms 的感觉，相信这不是你想看到的。因此，我个人建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也会因为时间很短，很难被用户察觉，并不会影响体验

w15228212327_cc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现元素展开收起时能有明显的高度滑动效果

传统实现可以使用 jQuery 的 slideUp()/ slideDown()方法，但是，在移动端，因为 CSS3 动画支持良好，所以移动端的 JavaScript 框架都是没有动画模块的。此时，使用 CSS 实现动画就成了最佳的技术选型我们的第一反应就是使用 height + overflow:hidden 实现。但是，很多时候，我们展开的元素内容是动态的，换句话说高度是不固定的，因此，height 使用的值是默认的 auto，应该都知道的 auto 是个关键字值，并非数.
复制链接

扫一扫