JavaScript實現(xiàn)動態(tài)高度過渡的3種方式總結(jié)

更新時間：2024年01月15日 08:27:52 作者：好大貓

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)高度過渡的3種方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

關(guān)于 height 不可以設(shè)置過渡動畫

我想只要是寫過 css 對于這個屬性就不陌生，它可以設(shè)置一個元素的高度，那么為什么不可以設(shè)置過渡動畫呢？

我有2點猜想：

因為動畫需要 初始狀態(tài)和結(jié)束狀態(tài)，我們的初始狀態(tài)是 0, 但是結(jié)束狀態(tài)是不確定的
為了性能，因為改變高度需要導致頁面重排，瀏覽器為了避免性能消耗

這只是我猜想，具體原因不清楚，以后知道了再補上

過渡

max-height

在 mdn-height 上有這么一句話, 這句話很重要

根據(jù) mdn 對 height 的介紹，max-height 會覆蓋 height 屬性，我們可以設(shè)置一個較大的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;
}

此時頁面元素已經(jīng)被隱藏，所以只需要切換 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 應該設(shè)置多少

如果過大，那么就會一段元素等待執(zhí)行時間，看起來元素靜止不動，然后開始突然收縮
如果過小，那么元素會被截斷，會出現(xiàn)展開不完全的情況

只有當你知道這個元素大概高度的時候，可以考慮使用

requestAnimationFrame

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。

重點： 重繪之前調(diào)用回調(diào)函數(shù)

我們可以利用這個特性

// 要展開的元素
let el = content.value as HTMLElement

 el.style.height = 'auto';
 let h = el.offsetHeight;
 el.style.height = '0px';
 requestAnimationFrame(() => {
    el.style.height = h + 'px'
 })

我們先讓元素的高度變?yōu)?auto,此時雖然高度變了，但是瀏覽器還沒有刷新頁面
然后獲取他的 offsetHeight，此時就是結(jié)束時的高度
然后再高度重置為 0
最后在瀏覽器 重繪之前 再把高度還給他，此時瀏覽器就會從 0 開始變化到結(jié)束高度

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,并且設(shè)置 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;
}

由于設(shè)置了 0fr，元素不可見，同時在子元素上設(shè)置了 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;
}

可以看到還是很流暢的

總結(jié)

今天介紹了 3 種關(guān)于動態(tài)高度的過渡

第一種利用了 max-height 可以覆蓋 height 屬性，缺點是不容易控制max-height 的高度
第二種利用了 requestAnimationFrame 是會在下一幀執(zhí)行回調(diào)，我們先計算得知結(jié)束高度，然后從0開始過渡到結(jié)束高度
第三種是利用了 grid-template-rows 的屬性，通過設(shè)置 0fr 進行關(guān)閉，設(shè)置 1fr 進行展開

到此這篇關(guān)于JavaScript實現(xiàn)動態(tài)高度過渡的3種方式總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript動態(tài)高度過渡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: