javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript动态高度过渡

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

作者:好大猫

这篇文章主要为大家详细介绍了JavaScript实现动态高度过渡的3种方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

关于 height 不可以设置过渡动画

我想只要是写过 css 对于这个属性就不陌生,它可以设置一个元素的高度, 那么为什么不可以设置过渡动画呢?

我有2点猜想:

这只是我猜想,具体原因不清楚,以后知道了再补上

过渡

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'
 })

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 种关于动态高度的过渡

到此这篇关于JavaScript实现动态高度过渡的3种方式总结的文章就介绍到这了,更多相关JavaScript动态高度过渡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文