關於React中動畫不生效的一些思考

項目中須要作這樣的一個組件

根據不一樣的數值，這個藍色的條顯示的寬度不一樣。
這個其實很簡單，我只要根據數據動態的計算它的寬度，生成節點就好了。
其中的部分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}

這樣就實現如上圖所示的功能顯示，可是如今又有個需求，就是須要那個藍色的條剛加載的時候動起來。

transition

我一開始就想到了css的transition屬性，而後把它加入代碼中

.inner {
        width: 0;
        transition: width 0.6s ease;
      }

但是這個動畫並無生效。

而後我就回過頭來思考它爲何沒有生效？
transition這個屬性只有在width屬性發生改變的時候纔會產生做用。如今只能說明span的width並無發生改變。
這時候就要說到個人這段代碼了，它是一邊計算寬度，一邊渲染節點的，也就是說它節點生成的時候，寬度就已經定好了。因此transition固然不會生效了

如今我要怎麼改進這段代碼使動畫生效呢？

我只能先讓節點生成好，而後再改變它的寬度了。
這就想到了react中的ref屬性了，這個屬性接受字符串或者一個函數，而這個函數在節點加載完成後或者節點銷燬前都會觸發，而後我就能夠經過這個函數返回的參數，操做這個節點改變寬度了，這正是我所須要的。
有了思路，開始改進代碼。

{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}

而後打開瀏覽器看結果，果真成功了。
效果以下。