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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
端午节活动策划方案
2014/03/09 职场文书
法律专业求职信
2014/05/24 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
假期安全教育广播稿
2014/10/04 职场文书
2014年党总支工作总结
2014/12/18 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
Python中基础数据类型 set集合知识点总结
2021/08/02 Python