React中動畫不生效的原因分析

這篇文章要跟大家介紹的內容是React中動畫不生效的原因分析，有著一定的參考價值，有需要的朋友可以參考一下。

專案中需要做這樣的一個元件
根據不同的數值，這個藍色的條所顯示的寬度不同。
這個其實很簡單，我只要根據資料動態的計算它的寬度，生成節點就行了。
其中的部分react程式碼如下

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span></span>
                </p>
              
            ))
          : 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) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span> {
                      if (n && n.style) {
                        n.style.width = `${getWidth(item.value)}px`;
                      }
                    }}
                  />
                </span></p>
              
            ))
          : null}

然後開啟瀏覽器看結果，果然成功了。
效果如下。

相關推薦：

js如何實作將上傳圖片並且壓縮的方法

#react的使用： React如何渲染UI

以上是React中動畫不生效的原因分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！