當前位置：首頁 > 科技 > 軟件

dom 獲取不到？試試 CSS 動畫監聽元素渲染吧

來源：責編：時間：2024-01-15 17:11:59 235觀看

導讀在數據驅動視圖的框架下，你最頭疼的事情是什么？沒錯，就是獲取dom。大部分業務邏輯都可以在數據層面進行處理，但有些情況就不得不去獲取真實的dom，比如獲取元素的寬高dom.offsetHeight或者調用某些dom方法等dom.scrollTop =

在數據驅動視圖的框架下，你最頭疼的事情是什么？沒錯，就是獲取dom。大部分業務邏輯都可以在數據層面進行處理，但有些情況就不得不去獲取真實的dom，比如獲取元素的寬高

dom.offsetHeight

或者調用某些dom方法等

dom.scrollTop = 100

通常在框架里，比如說vue中，會如何獲取真實 dom 呢？我想大家可能都用過這樣一個方法nextTick，用于在數據更新后獲取 dom，如下

this.show = truethis.$nextTick(() => (  document.getElementById('xx').scrollTop = 100))

用過的都知道，這個方式非常不靠譜，經常會出現諸如類似這樣的錯誤

Cannot read property 'scrollTo' of undefined

碰到這種情況，很多同學可能會用定時器，如果500不行，那就換1000，只要延時夠長，總能獲取到真實dom的。

this.show = truesettimeout(() => (  document.getElementById('xx').scrollTop = 0),500)

或許這些框架底層有其他解決方式，不過我并不精通這些，那么，從原生角度，有什么比較好的方式去解決這些問題呢？換句話說，如何確保元素渲染時機呢？

一、如何監聽元素渲染？

元素監聽最官方的方式是MutationObserver，這個API天生就是為了 dom變化檢測而生的。

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

功能非常強大，幾乎能監聽到 dom的所有變化，包括上面提到的元素渲染成功。

但是，正是因為過于強大，所以它的api就變得極其繁瑣，下面是MDN里的一段例子

// 選擇需要觀察變動的節點const targetNode = document.getElementById("some-id");// 觀察器的配置（需要觀察什么變動）const config = { attributes: true, childList: true, subtree: true };// 當觀察到變動時執行的回調函數const callback = function (mutationsList, observer) {  // Use traditional 'for loops' for IE 11  for (let mutation of mutationsList) {    if (mutation.type === "childList") {      console.log("A child node has been added or removed.");    } else if (mutation.type === "attributes") {      console.log("The " + mutation.attributeName + " attribute was modified.");    }  }};// 創建一個觀察器實例并傳入回調函數const observer = new MutationObserver(callback);// 以上述配置開始觀察目標節點observer.observe(targetNode, config);// 之后，可停止觀察observer.disconnect();

我相信，除非特殊需求，沒人會愿意寫上這樣一堆代碼吧，定時器不比這個“香”多了？

那么，有沒有一些簡潔的、靠譜的監聽方法呢？

其實，文章標題已經暴露了，沒錯，我們可以用 CSS 動畫來監聽元素渲染。

原理其實很簡單，給元素一個動畫，動畫會在元素添加到頁面時自動播放，進而觸發animation*相關事件。

圖片

代碼也很簡單，先定義一個無關緊要的 CSS 動畫，不能影響視覺效果，比如

@keyframes appear{  to {    opacity: .99;  }}

然后給需要監聽的元素上添加這個動畫

div{  animation: appear .1s;}

最后，只需要在這個元素或者及其父級上監聽動畫開始時機就行了，如果有多個元素，建議放在共同父級上

parent.addEventListener('animationstart', (ev) => {  if (ev.animationName == 'appear') {    // 元素出現了，可以獲取dom信息了  }})

下面來看幾個實際例子

二、多行文本展開收起

沒錯，又是這個例子。

前不久，嘗試用 CSS 容器實現了這個效果，有興趣的可以參考這篇文章：

嘗試借助CSS @container實現多行文本展開收起

雖然最后實現了，但是dom結構及其復雜，如下

<div class="text-wrap">  <div class="text" title="歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。">    <div class="text-size">      <div class="text-flex">        <div class="text-content">          <label class="expand"><input type="checkbox" hidden></label>          歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。        </div>      </div>    </div>  </div>  <div class="text-content text-place">    歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。  </div></div>

很多重復的文本和多余的標簽，這些都是為了配合容器查詢添加的。

其實說到底，只是為了判斷一下尺寸，其實 JS 是更好的選擇，麻煩的只是獲取尺寸的時機。如果通過 CSS 動畫來監聽，一切就都好辦了。

我們先回到最基礎的HTML結構

<div class="text-wrap">  <div class="text-content">    <label class="expand"><input type="checkbox" hidden></label>    歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧。  </div></div>

這些結構是為了實現右下角的“展開”按鈕必不可少的，如果不太清楚是如何布局的，可以回顧一下之前這篇文章：

CSS 實現多行文本“展開收起”

相關 CSS 如下

.text-wrap{  display: flex;  position: relative;  width: 300px;  padding: 8px;  outline: 1px dashed #9747FF;  border-radius: 4px;  line-height: 1.5;  text-align: justify;  font-family: cursive;}.expand{  font-size: 80%;  padding: .2em .5em;  background-color: #9747FF;  color: #fff;  border-radius: 4px;  cursor: pointer;  float: right;  clear: both;}.expand::after{  content: '展開';}.text-content{  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}.text-content::before{  content: '';  float: right;  height: calc(100% - 24px);}.text-wrap:has(:checked) .text-content{  -webkit-line-clamp: 999;}.text-wrap:has(:checked) .expand::after{  content: '收起';}

效果如下

通過前一節的原理，我們給文本容器添加一個無關緊要的動畫

.text-content{  /**/  animation: appear .1s;}@keyframes appear {  to {    opacity: .99;  }}

然后，我們在父級上監聽這個動畫，我這里直接監聽document，這里做的事情很簡單，判斷一下容器的滾動高度和實際高度，如果滾動高度超過實際高度，說明文本較多，超出了指定行數，這種情況就給容器添加一個特殊的屬性

document.addEventListener('animationstart', (ev) => {  if (ev.animationName == 'appear') {    ev.target.dataset.mul = ev.target.scrollHeight > ev.target.offsetHeight;  }})

然后根據這個屬性，判斷“展開”按鈕隱藏或者顯示

.expand{  /**/  visibility: hidden;}.text-content[data-mul="true"] .expand{  visibility: visible;}

這樣只有在文本較多時，“展開”按鈕才會出現，效果如下

圖片

是不是要簡單很多？完整代碼可以參考以下鏈接

CSS els with animation (juejin.cn)[1]
CSS els with animation (codepen.io)[2]

三、文本超長時自動滾動

再來看一個例子，相信大家都碰到過。

先看效果吧，就是一個無限滾動的效果，類似與以前的marquee標簽

首先來看HTML，并沒有什么特別之處

<div class="marqee">  <span class="text" title="這是一段可以自動滾動的文本">這是一段可以自動滾動的文本</span></div>

這里是首尾無縫銜接，所以需要兩份文本，我這里用偽元素生成

.text::after{  content: attr(title);  padding: 0 20px;}

單純的滾動其實很容易，就一行 CSS，如下

.text{  animation: move 2s linear infinite;}@keyframes move{  to {    transform: translateX(-50%);  }}

這樣實現會有兩個問題，效果如下

圖片

一是較少的文本也發生的滾動，二是滾動速度不一致。

所以，有必要借助 JS來修正一下。

還是上面的方式，我們直接用CSS動畫來監聽元素渲染

.marqee{  /**/  animation: appear .1s;}@keyframes appear {  to {    opacity: .99;  }}

然后監聽動畫開始事件，這里要做兩件事，也就是為了修正前面提到的兩個問題，一個是判斷文本的真實寬度和容器寬度的關系，還有一個是獲取判斷文本寬度和容器寬度的比例關系，因為文本越長，需要滾動的時間也越長

document.addEventListener('animationstart', (ev) => {  if (ev.animationName == 'appear') {    ev.target.dataset.mul = ev.target.scrollWidth > ev.target.offsetWidth;    ev.target.style.setProperty('--speed', ev.target.scrollWidth / ev.target.offsetWidth);  }})

拿到這些狀態后，我們改一下前面的動畫。

只有data-mul為true的情況下，才執行動畫，并且動畫時長是和--speed成比例的，這樣可以保證所有文本的速度是一致的

.marqee[data-mul="true"] .text{  display: inline-block;  animation: move calc(var(--speed) * 3s) linear infinite;}

還有就是只有data-mul為true的情況下才會生成雙份文本

.marqee[data-mul="true"] .text::after{  content: attr(title);  padding: 0 20px;}

這樣判斷以后，就能得到我們想要的效果了

完整代碼可以參考以下鏈接

CSS marquee width animation (juejin.cn)[3]
CSS marquee width animation (codepen.io)[4]

四、元素錨定定位

最后再來一個例子，其實這個方式我平時用的很多了，一個任務列表頁面，我們有時候會遇到這樣的需求，在地址欄上傳入一個 id，例如

https://xxx.com?id=5

然后，根據這個id自動錨定到這個任務上（讓這個任務滾動到屏幕中間）

由于這個任務是通過接口返回渲染的，所以必須等待 dom渲染完全才能獲取到。

圖片

傳統的方式可能又要通過定時器了，這時可以考慮用動畫監聽的方式。

.item{  /**/  animation: appear .1s;}@keyframes appear {  to {    opacity: .99;  }}

然后我們只需要監聽動畫開始事件，判斷一下元素的 id 是否和我們傳入的一致，如果是一致就直接錨定就行了

const current_id = 'item_5';// 假設這個是url傳進來的document.addEventListener('animationstart', (ev) => {  if (ev.animationName == 'appear' && ev.target.id === current_id) {    ev.target.scrollIntoView({      block: 'center'    })  }})

這樣就能準確無誤的獲取到錨定元素并且滾動定位了，效果如下

完整代碼可以參考以下鏈接

CSS scrollIntoView with animation (juejin.cn)[5]
CSS scrollIntoView with animation (codepen.io)[6]

五、其他注意事項

在實際使用中，有一些要注意一下。

比如，在vue中也可以將這個監聽直接綁定在父級模板上，這樣會更方便

<div @animationstart="apear">  </div>

還有一點比較重要，很多時候我們用的的可能是CSS scoped，比如

<style scoped>.item{  /**/  animation: appear .1s;}@keyframes appear {  to {    opacity: .99;  }}</style>

如果是這種寫法就需要注意了，因為在編譯過程中，這個動畫名稱會加一些哈希后綴，類似于這樣

所以，我們在animationstart判斷時要改動一下，比如用startsWith

document.addEventListener('animationstart', (ev) => {  if (ev.animationName.startsWith('appear')) {    //   }})

這個需要額外注意一下

六、總結一下

是不是從來沒有用過這些方式，趕緊試一試吧，相信會有不一樣的感受，下面總結一下

在數據驅動視圖的框架下，獲取dom是一件比較頭疼的事情
很多時候數據更新了，dom還沒來得及更新，這時獲取就出錯了
元素監聽最官方的方式是MutationObserver，但是比較復雜，一般情況下不會有人用
另辟蹊徑，我們可以用 CSS 動畫來監聽元素渲染
原理非常簡單，給元素一個動畫，動畫會在元素添加到頁面時自動播放，進而觸發animation*相關事件
利用這個技巧，我們可以很輕松的獲取元素的dom相關信息已經觸發相關事件
注意一下框架里的編譯，可能會更改動畫名稱

總的來說，這是一個非常實用的小技巧，雖然沒有純 CSS那么“高級”，但是卻是最“實用”的。

[1]CSS els with animation (juejin.cn)： https://code.juejin.cn/pen/7323120296334983187

[2]CSS els with animation (codepen.io)： https://codepen.io/xboxyan/pen/gOELbxV

[3]CSS marquee width animation (juejin.cn)： https://code.juejin.cn/pen/7323125690973945897

[4]CSS marquee width animation (codepen.io)： https://codepen.io/xboxyan/pen/YzgGmLb

[5]CSS scrollIntoView with animation (juejin.cn)： https://code.juejin.cn/pen/7323419904693469234

[6]CSS scrollIntoView with animation (codepen.io)： https://code.juejin.cn/pen/7323419904693469234

本文鏈接：http://www.www897cc.com/showinfo-26-61908-0.htmldom 獲取不到？試試 CSS 動畫監聽元素渲染吧

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： C++中的final和override關鍵字詳解

下一篇：未來世界的12個軟件開發預測

標簽：

熱門焦點

K60至尊版剛預熱一加Ace2 Pro正面硬剛

Redmi這邊剛如火如荼的宣傳了K60 Ultra的各種技術和硬件配置，作為競品的一加也坐不住了。一加中國區總裁李杰發布了兩條微博，表示在自家的一加Ace2上早就已經采用了和PixelWo
小米官宣：2023年上半年出貨量中國第一！

今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達到了中國第一，同時還表示小米電視的巨屏風暴即將開始。“公布一個好消息2023年#小米電視上半年出貨量中國
太卷！Redmi MAX 100英寸電視便宜了：12999元買Redmi史上最大屏

8月5日消息，從小米商城了解到，Redmi MAX 100英寸巨屏電視日前迎來官方優惠，到手價12999元，比發布價便宜了7000元，在大屏電視市場開卷。據了解，Redmi MAX 100
一年經驗在二線城市面試后端的經驗分享

忠告這篇文章只適合2年內工作經驗、甚至沒有工作經驗的朋友閱讀。如果你是2年以上工作經驗，請果斷劃走，對你沒啥幫助~主人公這篇文章內容來自「升職加薪」星球星友的投稿，坐
從 Pulsar Client 的原理到它的監控面板

背景前段時間業務團隊偶爾會碰到一些 Pulsar 使用的問題，比如消息阻塞不消費了、生產者消息發送緩慢等各種問題。雖然我們有個監控頁面可以根據 topic 維度查看他的發送狀態，
得物效率前端微應用推進過程與思考

一、背景效率工程隨著業務的發展，組織規模的擴大，越來越多的企業開始意識到協作效率對于企業團隊的重要性，甚至是決定其在某個行業競爭中突圍的關鍵，是企業長久生存的根本。得物
三星Galaxy Z Fold5今日亮相：厚度縮減但仍略顯厚重

據官方此前宣布，三星將于7月26日也就是今天在韓國首爾舉辦Unpacked活動，屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
2299元起！iQOO Pad明晚首銷：性能最強天璣平板

5月23日，iQOO如期舉行了新品發布會，除了首發安卓最強旗艦處理器的iQOO Neo8系列新機外，還在發布會上推出了旗下首款平板電腦——iQOO Pad，其最大的賣點
利用職權私自解除被封帳號 Meta開除20多名員工

11月18日消息，據外媒援引知情人士表示，過去一年時間內，Facebook母公司Meta解雇或處罰了20多名員工以及合同工，指控這些人通過內部系統以不當方式重置用戶帳號，其

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

dom 獲取不到？試試 CSS 動畫監聽元素渲染吧

一、如何監聽元素渲染？

二、多行文本展開收起

三、文本超長時自動滾動

四、元素錨定定位

五、其他注意事項

六、總結一下

K60至尊版剛預熱一加Ace2 Pro正面硬剛

小米官宣：2023年上半年出貨量中國第一！

太卷！Redmi MAX 100英寸電視便宜了：12999元買Redmi史上最大屏

一年經驗在二線城市面試后端的經驗分享

從 Pulsar Client 的原理到它的監控面板

得物效率前端微應用推進過程與思考

三星Galaxy Z Fold5今日亮相：厚度縮減但仍略顯厚重

2299元起！iQOO Pad明晚首銷：性能最強天璣平板

利用職權私自解除被封帳號 Meta開除20多名員工

最新推薦

猜你喜歡

熱門推薦

相關資訊