項目中需要做這樣的一個組件
image.png
根據(jù)不同的數(shù)值片效，這個藍色的條顯示的寬度不同。
這個其實很簡單英古，我只要根據(jù)數(shù)據(jù)動態(tài)的計算它的寬度淀衣，生成節(jié)點就行了。
其中的部分react代碼如下
{data && data.length > 0
? data.map((item, index) => (
<div className={styles.item} key={index}>
<div className={styles.itemTop}>
<span>{item.name || item.label}</span>
<span className={styles.num}>{item.value}</span>
</div>
<p className={styles.progressBar}>
<span
className={styles.inner}
style={{ background, width: getWidth(item.value)}
/>
</p>
</div>
))
: 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當然不會生效了
現(xiàn)在我要怎么改進這段代碼使動畫生效呢线得？
我只能先讓節(jié)點生成好，然后再改變它的寬度了徐伐。
這就想到了react中的ref屬性了贯钩，這個屬性接受字符串或者一個函數(shù)，而這個函數(shù)在節(jié)點加載完成后或者節(jié)點銷毀前都會觸發(fā)办素，然后我就可以通過這個函數(shù)返回的參數(shù)角雷，操作這個節(jié)點改變寬度了，這正是我所需要的性穿。
有了思路勺三，開始改進代碼。
{data && data.length > 0
? data.map((item, index) => (
<div className={styles.item} key={index}>
<div className={styles.itemTop}>
<span>{item.name || item.label}</span>
<span className={styles.num}>{item.value}</span>
</div>
<p className={styles.progressBar}>
<span
className={styles.inner}
style={{ background }}
ref={n => {
if (n && n.style) {
n.style.width = `${getWidth(item.value)}px`;
}
}}
/>
</p>
</div>
))
: null}
然后打開瀏覽器看結(jié)果需曾，果然成功了吗坚。
效果如下。
7月-19-2018 18-05-36.gif
