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