是否根据用户交互更改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通常会自动执行此操作。我跟踪状态中最后按下的按钮，然后添加适当的类。

我对这个解决方案不太满意，但它适用于这个项目。我非常好奇是否有一种更像react的方式来做这件事。