CSS Transition通过改变Height实现展开收起元素


Posted in HTML / CSS onAugust 07, 2021

一个常见的开发需要,我们希望折叠元素的一部分,直到需要它为止。一些常见的框架(如 Bootstrap 和 JQuery)提供了转换效果。然而,CSS Transition 在转换高度方面给予了我们很大的灵活性。因此,您不必在项目中加入其他框架。
下面我们看看,如何使用 CSS Transition 设置 height 属性的动画效果以及其存在的问题、解决方案。
你可以在?查看效果

过渡高度

我们要实现的操作是,当点击查看更多按钮将增加元素的高度,以显示文章的所有内容,再次点击时,它将收回到原本的样子。
我们将为此创建一个 CSS 类。单击查看更多按钮时,将使用 JavaScript 将此类添加到 <article> 元素上。
首先,我们将向 HTML 文件添加一个  元素,并为其添加一些内容。

<article id="article">
  <h3>使用 CSS Transition 通过改变 Height 来展开收起元素</h3>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis tempora iure accusamus rerum. Fuga porro unde, laboriosam soluta accusantium numquam quos adipisci commodi velit, expedita officia cum excepturi molestias.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>
</article>
<button id="seeMoreBtn">查看更多</button>

CSS 样式如下:

article {
  max-width: 800px;
  height: 300px;
  overflow-y: hidden;
}

/* 单击按钮时添加此类 */
article.extended {
  height: 628px;
}

button {
  padding: .6rem;
}

JavaScript 如下:

const seeMore = document.getElementById('seeMoreBtn')
const article = document.getElementById('article')

seeMore.addEventListener('click', () => {
  article.classList.toggle('extended')

  const extended = article.classList.contains('extended')
  if (extended) {
    seeMore.innerHTML = '收起内容'
  } else {
    seeMore.innerHTML = '查看更多'
  }
})

向 article 添加 CSS transition 过渡属性,使其点击按钮时内容可以丝滑的上下滑动。

article {
  max-width: 800px;
  height: 300px;
  overflow-y: hidden;
  transition: height 0.4s linear;
}

现在将它应用到你的文章,你可以看到它可以上下丝滑的滑动着,很简单、方便,但此方法存在的限制。下面我们来看看。

限制

这个限制体现在是否知其高度,以上的例子我们清楚的知道文章的高度,它工作的效果非常好,但当我们在处理动态内容时,我们不知道元素的高度,其高度也可能随着屏幕大小或其他方式进行变化。
其实解决方式也很简单,对于动态内容,元素的高度应设置为 auto。这样,任何增加或减少的元素高度都将自适应。但也会出现另一个问题:当元素的高度设置为 auto 时,CSS transition 将不起作用。
好消息是,有一种方法可以解决此问题,而不必求助于更多的 JavaScript。

解决方案

解决方法是转换 max-height 属性而不是 height 属性。首先,我们必须估计我们的元素能达到的最大高度。然后,当元素展开时,我们将该元素设置为 max-height 大于我们的估计值。
我们将 height 属性改为 max-height:

article {
    max-width: 800px;
    max-height: 300px;
    overflow-y: hidden;

    /* 增加过渡时间以适应高度 */
    transition: max-height 0.7s linear;
}

article.expanded {
    max-height: 1500px;
}

这样动画的工作原理,我们仍然得到我们想要的效果。过渡时间可能需要根据您需要的效果进行调整。

到此这篇关于CSS Transition通过改变Height实现展开收起元素的文章就介绍到这了,更多相关CSS  Height展开收起元素内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 #HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 #HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 #HTML / CSS
CSS 实现Chrome标签栏的技巧
纯html+css实现Element loading效果
纯html+css实现奥运五环的示例代码
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
You might like
DISCUZ 分页代码
2007/01/02 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Numpy数组的广播机制的实现
2020/11/03 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
大学生个人实习的自我评价
2014/02/15 职场文书
临床医师个人自我评价
2014/04/06 职场文书
地陪导游欢迎词
2015/01/26 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
毕业论文致谢词
2015/05/14 职场文书
自荐信范文
2019/05/20 职场文书