React Transition Group: постоянный чат - PullRequest
Новая
       9

React Transition Group: постоянный чат

0 голосов
/ 13 ноября 2018

В моем приложении есть речевой пузырь, в котором есть скользящий текст, контролируемый редуксом.Используя библиотеку animate css , я пытаюсь заставить текст постепенно увеличиваться, когда он появляется, и исчезать, когда текст меняется.

Прямо сейчас у меня есть что-то вроде этого:

SpeechBubble.js 

// I set up the animate component like this so that it's not static and reusable based on the prop I pass
const Animate = animations[this.props.animation];

<div className="speech-bubble">
  <Animate>
    <div>{speech.text}</div>
  </Animate>
</div>

Animate является переменным компонентом, в данном случае моя FadeInUpOutDown анимация (я получаювсе стили анимации из библиотеки CSS выше): 

const fadeClasses = {
  appearActive: 'fadeInUp-appear-active',
  exitActive: 'fadeOutDown-exit-active'
}

const FadeInUpOutDown = props => (
  <CSSTransition
    appear
    classNames={fadeClasses}
    in
    onExiting={() => console.log('yo')}
    timeout={750}
  >
    {props.children}
  </CSSTransition>
);

Глядя на документацию для React Transition Group, я не могу, по жизни, понять, как получитьскользящий текст.Под этим я подразумеваю, что когда я изменяю состояние моего текстового редуктора, я хочу, чтобы старый текст постепенно исчезал, а новый текст исчезал во всем одним плавным движением.Прямо сейчас мой текст просто исчезает.

...