Изменить анимацию выхода группы реакции в зависимости от взаимодействия с пользователем? - PullRequest
Новая
       19

Изменить анимацию выхода группы реакции в зависимости от взаимодействия с пользователем?

0 голосов
/ 26 марта 2019

Я довольно новичок в React и Reaction-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;

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 26 марта 2019

Насколько я могу судить, нет никакого встроенного способа сделать это через реагирующую группу перехода, кроме как с помощью их функций обратного вызова. 

<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>

У меня есть четыре функции, которые я использую для добавления классов к соответствующему узлу в то же время, когда группа реакции-перехода обычно делает это автоматически. Я отслеживаю, какая кнопка была нажата последней в состоянии, а затем добавляю соответствующий класс.

Я не очень доволен решением, но оно работает для этого проекта. Мне очень любопытно, есть ли более реактивный способ сделать это.

...