資訊專欄INFORMATION COLUMN
摘要：項目中需要做這樣的一個組件根據(jù)不同的數(shù)值，這個藍色的條顯示的寬度不同。我一開始就想到了的屬性，然后把它加入代碼中可是這個動畫并沒有生效。所以當然不會生效了現(xiàn)在我要怎么改進這段代碼使動畫生效呢我只能先讓節(jié)點生成好，然后再改變它的寬度了。
項目中需要做這樣的一個組件
根據(jù)不同的數(shù)值，這個藍色的條顯示的寬度不同。
這個其實很簡單，我只要根據(jù)數(shù)據(jù)動態(tài)的計算它的寬度，生成節(jié)點就行了。
其中的部分react代碼如下
{data && data.length > 0
? data.map((item, index) => (
{item.name || item.label}
{item.value}
))
: null}
這樣就實現(xiàn)如上圖所示的功能顯示，但是現(xiàn)在又有個需求，就是需要那個藍色的條剛加載的時候動起來。
transition我一開始就想到了css的transition屬性，然后把它加入代碼中
.inner {
width: 0;
transition: width 0.6s ease;
}
可是這個動畫并沒有生效。
然后我就回過頭來思考它為什么沒有生效？
transition這個屬性只有在width屬性發(fā)生改變的時候才會產(chǎn)生作用。現(xiàn)在只能說明span的width并沒有發(fā)生改變。
這時候就要說到我的這段代碼了，它是一邊計算寬度，一邊渲染節(jié)點的，也就是說它節(jié)點生成的時候，寬度就已經(jīng)定好了。所以transition當然不會生效了
我只能先讓節(jié)點生成好，然后再改變它的寬度了。
這就想到了react中的ref屬性了，這個屬性接受字符串或者一個函數(shù)，而這個函數(shù)在節(jié)點加載完成后或者節(jié)點銷毀前都會觸發(fā)，然后我就可以通過這個函數(shù)返回的參數(shù)，操作這個節(jié)點改變寬度了，這正是我所需要的。
有了思路，開始改進代碼。
{data && data.length > 0
? data.map((item, index) => (
{item.name || item.label}
{item.value}
{
if (n && n.style) {
n.style.width = `${getWidth(item.value)}px`;
}
}}
/>
))
: null}
然后打開瀏覽器看結(jié)果，果然成功了。
效果如下。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96264.html
摘要：規(guī)則分為可能是錯誤，最佳實踐，變量聲明等等，賀前輩的建議是能用的規(guī)則都用上。峰會中獎品挺多的，可惜與我擦肩而過。 iWeb峰會的消息是在開場前兩天才從朋友圈看到，稍微有點匆忙，只花了不到兩個小時的時間了解下相關(guān)主題。發(fā)現(xiàn)涉及的知識還是蠻多的，甚至一些平時也沒有接觸過。所以一些關(guān)注點，理解的層次都很有限，甚至可能有誤區(qū)，僅供參考及知識面的拓展。 工具應(yīng)用類 峰會的主題是HTML5，又分為...
摘要：實現(xiàn)不定期更新技巧前端掘金技巧，偶爾更新。統(tǒng)一播放效果實現(xiàn)打字效果動畫前端掘金前端開源項目周報前端掘金由出品的前端開源項目周報第四期來啦。 Web 推送技術(shù) - 掘金騰訊云技術(shù)社區(qū)-掘金主頁持續(xù)為大家呈現(xiàn)云計算技術(shù)文章，歡迎大家關(guān)注！ 作者：villainthr 摘自 前端小吉米 伴隨著今年 Google I/O 大會的召開，一個很火的概念--Progressive Web Apps ...
摘要：毫無疑問，設(shè)計模式于己于他人于系統(tǒng)都是多贏的設(shè)計模式使代碼編寫真正工程化設(shè)計模小書前端掘金這是一本關(guān)于的小書。 JavaScript 常見設(shè)計模式解析 - 掘金設(shè)計模式（Design pattern）是一套被反復使用、多數(shù)人知曉的、經(jīng)過分類編目的、代碼設(shè)計經(jīng)驗的總結(jié)。使用設(shè)計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。毫無疑問，設(shè)計模式于己于他人于系統(tǒng)都是多贏的；設(shè)計...
摘要：基礎(chǔ)的理論概念這篇文章是我的一次嘗試，希望能夠形式化的介紹關(guān)于本身的一些理念模型。我對于此實際的理念模型是在每次的更新過程中返回下一個階段的狀態(tài)。的目標是提升對在動畫，布局以及手勢方面的友好度。我已經(jīng)邀請了團隊的成員來對本文檔的準確性進行。 前言 本文主要是對收集到的一些官方或者其他平臺的文章進行翻譯，中間可能穿插一些個人的理解，如有錯誤疏漏之處，還望批評指正。筆者并未研究過源碼，只是...
閱讀 3064·2021-10-12 10:12
閱讀 5404·2021-09-26 10:20
閱讀 1529·2021-07-26 23:38
閱讀 2821·2019-08-30 15:54
閱讀 1654·2019-08-30 13:45
閱讀 1971·2019-08-30 11:23
閱讀 3095·2019-08-29 13:49
閱讀 840·2019-08-26 18:23
