时间戳

首页 > 解决方案 > 根据用户交互更改 react-transition-group 退出动画？

javascript - 根据用户交互更改 react-transition-group 退出动画？

问题描述

我对 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;

谢谢你的帮助！

标签： javascriptreactjsreact-transition-group

解决方案

据我所知，除了回调函数外，没有内置的方法可以通过 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 通常会自动执行。我跟踪状态下最后按下的按钮，然后添加适当的类。

我对这个解决方案不太满意，但它适用于这个项目。我很好奇是否有一种更像反应的方式来做到这一点。

推荐阅读