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 动画技术
Jul 27 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
公司年会演讲稿范文
2014/01/11 职场文书
英语商务邀请函范文
2014/01/16 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS