группа реакции-перехода со стилизованными компонентами, не анимирующими - PullRequest
Новая
       22

группа реакции-перехода со стилизованными компонентами, не анимирующими

0 голосов
/ 25 октября 2018

Я безуспешно пытался оживить мой styled-component с помощью react-transition-group.Вот мой Component.js, где я пытаюсь анимировать только при выходе: 

import React from 'react'
import styled from 'styled-components'
import {Transition} from 'react-transition-group'

const Container = styled.li`
  ...styles...
  &.component-exiting {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 1000ms, max-height 500ms 1000ms;
  }
  &.component-exited {
    opacity: 0;
    max-height: 0px;
  }
`

class Component extends React.Component {

  state = {
    hasBeenClicked: false
  }

  render() {
    return (
      <Transition
        timeout={1500}
        in={!this.state.hasBeenClicked}>
        {status => 
          <Container
            className={`component-${status}`}
            onClick={() => this.setState({hasBeenClicked: true})}>
            {...stuff...}
          </Container>
        }
      </Transition>
    )
  }
}

Я хочу, чтобы анимация длилась 1,5 секунды (timeout={1500}).Однако, когда я нажимаю, в течение этих 1,5 секунд ничего не происходит, а затем компонент просто исчезает.

Есть идеи, что я делаю неправильно?

...