根據用戶交互更改react-transition-group退出動畫？

Question

我是React和react-transition-group的新手。 我正在創建一個非常簡單的應用程序，顯示當天的單詞，我在設置動畫信息卡方面遇到了一些麻煩。

它基本上像圖像輪播一樣工作。 如果用戶單擊向左箭頭，則當前內容向右滑動，新內容從左側滑入。 如果用戶單擊向右箭頭，則當前內容向左滑動，新內容從右側滑入。

問題是，使用react-transition-group，您必須在組件呈現時設置CSS類名。 但我不知道組件在已經渲染之前需要退出的方向。 這意味着有時組件以錯誤的方式退出。

import React from "react";
import words from  '../words.json';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

class TodaysDefinition extends React.Component{

    render(){
        let {day, nextOrPrev} = this.props;
        let {def} = words[day - 1 ];

        //trying to set the classNames prop based on which button was pressed last.
        let transitionClass = "";
        if(nextOrPrev === -1){
            transitionClass = "prev-defs";
        }
        else{transitionClass = "next-defs";}

        return(
            <div className="def-container">
                <TransitionGroup component={null}>
                    <CSSTransition
                    classNames={transitionClass}
                    key={this.props.day}
                    timeout={{enter:300, exit:300}} >
                        <ol className="defs">
                            {def.map((def,idx) => (<li key={idx} >{def}</li>))}
                        </ol>
                    </CSSTransition>
                </TransitionGroup>
            </div>
        )
    }
}

export default TodaysDefinition;

謝謝你的幫助！

Answer 1

據我所知，除了回調函數之外，還沒有通過react-transition-group執行此操作的內置方法。

<CSSTransition
                classNames="next-defs"
                key={this.props.day}
                timeout={{enter:300, exit:300}}
                onEnter={(node) => this.enter(node)}
                onEntering={(node) => this.entering(node)}
                onExit={(node) => this.exit(node)}
                onExiting={(node) => this.exiting(node)} >
                    <ol className="defs">
                        {def.map((def,idx) => (<li key={idx} >{def}</li>))}
                    </ol>
                </CSSTransition>

我有四個函數用於在適當的時間將類添加到適當的節點，react-transition-group通常會自動執行。 我跟蹤狀態中最后按下的按鈕，然后添加適當的類。

我對解決方案並不滿意，但它適用於這個項目。 我很好奇是否有更像反應的方式來做到這一點。