JavaScript实现动态高度过渡的3种方式总结
关于 height 不可以设置过渡动画
我想只要是写过 css 对于这个属性就不陌生，它可以设置一个元素的高度， 那么为什么不可以设置过渡动画呢？
我有2点猜想：
- 因为动画需要 初始状态和结束状态，我们的初始状态是 0, 但是结束状态是不确定的
- 为了性能，因为改变高度需要导致页面重排，浏览器为了避免性能消耗
这只是我猜想，具体原因不清楚，以后知道了再补上
过渡
max-height
在 mdn-height 上有这么一句话, 这句话很重要
根据 mdn 对 height 的介绍，max-height 会覆盖 height 属性，我们可以设置一个较大的max-height 值来代替 height
<div class="maxHeightTransition" ref="maxHeightTransition">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus temporibus architecto enim,
iure minima accusantium magni adipisci corrupti odio earum,
necessitatibus aut delectus quibusdam porro distinctio
sequi repellat at ullam?
</div>
我们先给加上 max-hieght = 500px
.maxHeightTransition {
width: 100px;
background-color: skyblue;
transition: 0.5s;
/*添加 500px*/
max-hieght:500px
}
可以看到初始效果是这样的
我们加上 max-height = 0
.maxHeightTransition {
/*
* ....
*/
overflow: hidden;
max-height: 0px;
}
此时页面元素已经被隐藏，所以只需要切换 max-height 的值即可
const maxHeightTransition = ref<HTMLDivElement | null>(null)
const isOpen = ref(false);
// 切换方法
const toggleHeight = () => {
isOpen.value = !isOpen.value;
maxHeightTransition.value.style.maxHeight = isOpen.value ? '0px' : '500px'
}
这种做法有一个很明显的缺点是，max-height 应该设置多少
如果过大，那么就会一段元素等待执行时间，看起来元素静止不动，然后开始突然收缩
如果过小，那么元素会被截断，会出现展开不完全的情况
只有当你知道这个元素大概高度的时候，可以考虑使用
requestAnimationFrame
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
重点： 重绘之前调用回调函数
我们可以利用这个特性
// 要展开的元素
let el = content.value as HTMLElement
el.style.height = 'auto';
let h = el.offsetHeight;
el.style.height = '0px';
requestAnimationFrame(() => {
el.style.height = h + 'px'
})
- 我们先让元素的高度变为
auto,此时虽然高度变了，但是浏览器还没有刷新页面 - 然后获取他的
offsetHeight，此时就是结束时的高度 - 然后再高度重置为 0
- 最后在浏览器 重绘之前 再把高度还给他，此时浏览器就会从 0 开始变化到 结束高度
grid
这种方法也是视频中介绍的方法，即利用 grid-template-rows
<div class='box'>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus temporibus architecto enim,
iure minima accusantium magni adipisci corrupti odio earum,
necessitatibus aut delectus quibusdam porro distinctio
sequi repellat at ullam?
</div>
</div>
我们在父元素上添加display:grid,并且设置 grid-template-rows: 0fr
.box {
width: 100px;
background-color: skyblue;
color: white;
display: grid;
grid-template-rows: 0fr;
transition: 0.5s;
}
.content {
min-height: 0;
overflow: hidden;
}
由于设置了 0fr，元素不可见，同时在子元素上设置了 min-height: 0 防止文字填充高度
我们只需切换 grid-template-rows 为 1fr 即可
<div :class="['box', isOpen && 'open']">
</div>
const isOpen = ref(false);
const toggleHeight = () => {
isOpen.value = !isOpen.value;
}
.box:is(.open) {
grid-template-rows: 1fr;
}
可以看到还是很流畅的
总结
今天介绍了 3 种关于动态高度的过渡
- 第一种 利用了 max-height 可以覆盖 height 属性，缺点是不容易控制max-height 的高度
- 第二种利用了 requestAnimationFrame 是会在下一帧执行回调，我们先计算得知结束高度，然后从0开始过渡到结束高度
- 第三种是利用了 grid-template-rows 的属性，通过设置
0fr进行关闭，设置1fr进行展开
到此这篇关于JavaScript实现动态高度过渡的3种方式总结的文章就介绍到这了,更多相关JavaScript动态高度过渡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
打算做一个js面向对象的贪吃蛇,但是最终是流产了,整理了下废弃的代码,回顾了下PPT.想学习js面向对象的朋友也可以参考下。2011-08-08
这篇文章主要介绍了如何基于filter实现网站整体变灰功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript实现多重继承的方法,结合实例形式详细分析了javascript实现多重继承的具体步骤与相关操作技巧,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了JavaScript树形数据结构处理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
本文通过一个例子给大家简单介绍了bootstrap fileinput初始化时的一些参数，非常不错，具有参考借鉴价值，需要的朋友参考下2016-12-12
本文主要介绍了javascript中的事件冒泡和事件捕获，具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了微信小程序使用gitee进行版本管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Bootstrap与KnockoutJs相结合实现分页效果实例详解
KnockoutJS是一个JavaScript实现的MVVM框架。接下来通过本文给大家介绍Bootstrap与KnockoutJs相结合实现分页效果，对bootstrap knockoutjs相关知识感兴趣的朋友一起学习吧2016-05-05
这篇文章主要介绍了JS实现滑动门效果的方法,结合实例形式分析了滑动门效果的实现原理、步骤与相关注意事项,需要的朋友可以参考下2016-12-12
下拉选择框想必大家并不陌生，一边情况下都是使用默认的，为了打破传统，下面与大家分享下使用js自定义下拉选择框示例代码,感兴趣的朋友可以参考下2013-08-08
最新评论