animation - redux教學 - redux thunk



Redux/Flux(與ReactJS)和動畫 (2)

即時動作在節省狀態的REDX中是有問題的,所以如果我們發送動作並且它會改變存儲,那麼這個存儲的改變在下一個狀態中是可用的,所以我們可以有動畫反复顯示的情況,因為在存儲器中設置了這個參數。

我為redux即時動作的解決方案是添加一些像(動作示例代碼)的ID:

{
    type:"SOME_ANIMATION",
    id: new Date().getTime() //we get timestamp of animation init
}

接下來在運行動畫的組件中保存最後的動畫ID,如果它的匹配不做動畫。 例如,我使用組件狀態(組件代碼):

componentDidUpdate (){

if (this.lastAnimationId===this.props.animation.id)
return; //the same animation id so do not do anything

//here setState or do animation because it is new one

this.lastAnimationId=this.props.animation.id; //here set new id of last abnimation

}

感謝編號,我們可以只有一個行動,沒有行動是扭轉狀態。 在超時之後反轉動作可能會導致問題,因為如果在反向動作之前發送其他動作(與組件連接),則可以再次開始動畫。

我提出的方法是動畫數據存在狀態,但也存在動畫ID給我們的信息。 所以我們可以說商店保存了最近發布的動畫。

https://src-bin.com

我正在學習React + Redux,我不明白做動畫的正確方法。 讓我們以身作則:

例如,我有一個列表,我想刪除點擊項目。 如果我沒有動畫效果,那就太容易了:在點擊時發送REMOVE_ITEM動作,reducer從商店中刪除項目,並重新渲染html。

讓我們添加一個點擊刪除行項目的動畫。 所以,當用戶點擊一個項目,我想運行行項目刪除幻想效果... ... 怎麼樣? 我可以想到幾種方法如何做到這一點:

1)單擊我派遣REMOVE_ITEM行動,然後減少標記一個項目作為goingToBeDeleted存儲,然後反應呈現該元素與類.fancy-dissolve-animation ,我運行一個計時器調度第二個行動REMOVE_ITEM_COMPLETED 。 我不喜歡這個想法,因為它仍然不清楚如何在這裡添加JS動畫(例如,與TweenMax ),我運行一個JS定時器重新呈現時,CSS動畫結束。 聽起來不太好。

2)我以ITEM_REMOVE_PROGRESS的間隔調度ITEM_REMOVE_PROGRESS動作,並存儲一些表示動畫當前狀態的“值”。 我也不喜歡它,因為它需要我複製商店~120次~2秒的動畫(比如我想要60fps的動畫),這只是一種浪費記憶。

3)動畫結束後才能製作動畫並發送REMOVE_ITEM 。 這是我能想到的最適合的方式,但是我仍然希望在用戶做出行動之後立即在商店中更改內容。 例如,動畫可能需要比幾秒鐘更長的時間, REMOVE_ITEM可能會與後端同步 - 沒有理由等待動畫完成後端API調用。

感謝閱讀 - 有什麼建議嗎?


Answer #1

在ReactCSSTransitionGroup幫助器類中,React可以很好地解決這個問題(請參閱https://facebook.github.io/react/docs/animation.html )。 有了這個選項,React可以為你保留它,保持孩子的DOM狀態,因為它是在最後的渲染。 您只需將您的項目包裝在ReactCSSTransitionGroup對像中。 這跟踪了它的子元素,當它被移除的時候被渲染,而不是在沒有子元素的情況下渲染,而是和子元素一起呈現,但是向子元素添加一個CSS類(你可以用它來觸發一個CSS動畫,或者你可以簡單地使用CSS轉換)。 然後,在超時之後(配置為傳遞給ReactCSSTransitionGroup的道具),它將再次重新渲染,從DOM中刪除子項。

要使用ReactCSSTransitionGroup,您需要安裝react-addons-css-transition-group,然後require / import'react-addons-css-transition-group'。 動畫文檔提供更詳細的信息。

有一點要記住 - 確保孩子有獨特的,不變的鑰匙。 只是使用索引作為關鍵將使其行為不正確。





flux