JavaScript实现动态高度过渡的3种方式总结

 更新时间:2024年01月15日 08:27:52   作者:好大猫  
这篇文章主要为大家详细介绍了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-rows1fr 即可

<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实现用户注册功能

    用js实现用户注册功能

    这篇文章主要为大家详细介绍了用js实现用户注册的简洁版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 原生js实现轮播图的示例代码

    原生js实现轮播图的示例代码

    本篇文章主要介绍了原生js实现轮播图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS实现头像循环滚动示例

    JS实现头像循环滚动示例

    这篇文章主要为大家介绍了JS实现头像循环滚动示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies

    pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet p

    这篇文章主要为大家介绍了pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies报错解决
    2023-06-06
  • JavaScript代码生成PDF文件的方法

    JavaScript代码生成PDF文件的方法

    如何使用js生成pdf文件呢,下面通过本文给大家分享JavaScript代码生成PDF文件的方法,需要的朋友参考下吧
    2016-02-02
  • javascipt:filter过滤介绍及使用

    javascipt:filter过滤介绍及使用

    filter是new一个新的array,这篇文章主要介绍了javascipt filter过滤介绍及使用,需要的朋友可以参考下
    2014-09-09
  • egg.js的基本使用实例

    egg.js的基本使用实例

    本文主要介绍了egg.js的基本使用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 微信打开网址添加在浏览器中打开提示的办法

    微信打开网址添加在浏览器中打开提示的办法

    这篇文章主要介绍了微信打开网址添加在浏览器中打开提示的办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 前端弹出对话框 js实现ajax交互

    前端弹出对话框 js实现ajax交互

    这篇文章主要为大家详细介绍了前端弹出对话框,js实现ajax交互,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS简单判断是否在微信浏览器打开的方法示例

    JS简单判断是否在微信浏览器打开的方法示例

    这篇文章主要介绍了JS简单判断是否在微信浏览器打开的方法,结合实例形式分析了javascript针对浏览器相关信息的获取与判定操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论