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

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

我有2點(diǎn)猜想：

• 因?yàn)閯?dòng)畫需要 初始狀態(tài)和結(jié)束狀態(tài)，我們的初始狀態(tài)是 0, 但是結(jié)束狀態(tài)是不確定的
• 為了性能，因?yàn)楦淖兏叨刃枰獙?dǎo)致頁(yè)面重排，瀏覽器為了避免性能消耗

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

過(guò)渡

max-height

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

根據(jù) mdn 對(duì) height 的介紹，max-height 會(huì)覆蓋 height 屬性，我們可以設(shè)置一個(gè)較大的max-height 值來(lái)代替 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;
}

此時(shí)頁(yè)面元素已經(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'
}

這種做法有一個(gè)很明顯的缺點(diǎn)是，max-height 應(yīng)該設(shè)置多少

如果過(guò)大，那么就會(huì)一段元素等待執(zhí)行時(shí)間，看起來(lái)元素靜止不動(dòng)，然后開(kāi)始突然收縮
如果過(guò)小，那么元素會(huì)被截?cái)?，?huì)出現(xiàn)展開(kāi)不完全的情況

只有當(dāng)你知道這個(gè)元素大概高度的時(shí)候，可以考慮使用

requestAnimationFrame

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

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

我們可以利用這個(gè)特性

// 要展開(kāi)的元素
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,此時(shí)雖然高度變了，但是瀏覽器還沒(méi)有刷新頁(yè)面
• 然后獲取他的 offsetHeight，此時(shí)就是結(jié)束時(shí)的高度
• 然后再高度重置為 0
• 最后在瀏覽器 重繪之前 再把高度還給他，此時(shí)瀏覽器就會(huì)從 0 開(kāi)始變化到 結(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>

我們?cè)诟冈厣咸砑?code>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，元素不可見(jiàn)，同時(shí)在子元素上設(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)于動(dòng)態(tài)高度的過(guò)渡

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

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

最新評(píng)論