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-transition-group退出动画吗？

1 个答案: