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

baishancloud 發布于2019-08-22 18:50 / 2370人閱讀

摘要：項目中需要做這樣的一個組件根據不同的數值，這個藍色的條顯示的寬度不同。我一開始就想到了的屬性，然后把它加入代碼中可是這個動畫并沒有生效。所以當然不會生效了現在我要怎么改進這段代碼使動畫生效呢我只能先讓節點生成好，然后再改變它的寬度了。

項目中需要做這樣的一個組件

根據不同的數值，這個藍色的條顯示的寬度不同。
這個其實很簡單，我只要根據數據動態的計算它的寬度，生成節點就行了。
其中的部分react代碼如下

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

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

云服務器 GPU云服務器 vps日常維護中的一些要點總結關于JAVA中順序IO的基本操作緩存不生效 cdn不生效

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96264.html

上海 HTML5 峰會筆記整理與總結

摘要：規則分為可能是錯誤，最佳實踐，變量聲明等等，賀前輩的建議是能用的規則都用上。峰會中獎品挺多的，可惜與我擦肩而過。 iWeb峰會的消息是在開場前兩天才從朋友圈看到，稍微有點匆忙，只花了不到兩個小時的時間了解下相關主題。發現涉及的知識還是蠻多的，甚至一些平時也沒有接觸過。所以一些關注點，理解的層次都很有限，甚至可能有誤區，僅供參考及知識面的拓展。工具應用類峰會的主題是HTML5，又分為...

tinyq 2019-08-21 10:52 評論0 收藏0
前端閱讀 - 收藏集 - 掘金

摘要：實現不定期更新技巧前端掘金技巧，偶爾更新。統一播放效果實現打字效果動畫前端掘金前端開源項目周報前端掘金由出品的前端開源項目周報第四期來啦。 Web 推送技術 - 掘金騰訊云技術社區-掘金主頁持續為大家呈現云計算技術文章，歡迎大家關注！作者：villainthr 摘自前端小吉米伴隨著今年 Google I/O 大會的召開，一個很火的概念--Progressive Web Apps ...

lingdududu 2019-08-20 17:05 評論0 收藏0
前端窩 - 收藏集 - 掘金

摘要：毫無疑問，設計模式于己于他人于系統都是多贏的設計模式使代碼編寫真正工程化設計模小書前端掘金這是一本關于的小書。 JavaScript 常見設計模式解析 - 掘金設計模式（Design pattern）是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。毫無疑問，設計模式于己于他人于系統都是多贏的；設計...

李文鵬 2019-08-21 11:41 評論0 收藏0
【譯】React及React Fiber基本的設計理念

摘要：基礎的理論概念這篇文章是我的一次嘗試，希望能夠形式化的介紹關于本身的一些理念模型。我對于此實際的理念模型是在每次的更新過程中返回下一個階段的狀態。的目標是提升對在動畫，布局以及手勢方面的友好度。我已經邀請了團隊的成員來對本文檔的準確性進行。前言本文主要是對收集到的一些官方或者其他平臺的文章進行翻譯，中間可能穿插一些個人的理解，如有錯誤疏漏之處，還望批評指正。筆者并未研究過源碼，只是...

lewif 2019-08-20 15:47 評論0 收藏0