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感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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
1.PHP简介
2006/10/09 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
Python使用configparser库读取配置文件
2020/02/22 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
利用python 下载bilibili视频
2020/11/13 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
幼儿园消防安全制度
2014/01/26 职场文书
标准自荐信范文
2014/01/29 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
甜品店创业计划书
2014/09/21 职场文书
处级干部考察材料
2014/12/24 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
使用pytorch实现线性回归
2021/04/11 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript