這篇文章要跟大家介紹的內容是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}這樣就實現如上圖所示的功能顯示，但是現在又有個需求，就是需要那個藍色的條剛載入的時候動起來。
我一開始就想到了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}然後開啟瀏覽器看結果，果然成功了。
效果如下。
相關推薦：
以上是React中動畫不生效的原因分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
