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动态高度过渡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！