Почему анимация не работает ReactTransitionGroup + Anime. js? - PullRequest
Новая
       26

Почему анимация не работает ReactTransitionGroup + Anime. js?

0 голосов
/ 10 марта 2020

Я пытаюсь сделать анимацию появления (движения) элемента, но это не работает. Вот часть кода родительского компонента: 

...
<div className="bet  justify-content-center d-flex align-items-end">
          <TransitionGroup>
            {
              this.props.startCards.map((image, i) => (
                <Transition key={i} timeout={500} mountOnEnter unmountOnExit>
                  {
                    (status) => { return <Card image={image} delay={i*1000} status={status} /> }
                  }
                </Transition>
              ))
            }
          </TransitionGroup>
        </div>
...

Карта компонента: 

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.cardRef = React.createRef();
  }
  componentDidMount() {
    anime({
      target: this.cardRef.current,
      duration: 500,
      delay: this.props.delay,
      easing: 'easeInOutSine',
      translateX: () => {
        if(  this.props.status == 'entering' ) return '-120%';
        else if( this.props.status == 'exiting' ) return '-10%';
      },
      translateY: () => {
        if(  this.props.image.class ==  'playerCard' ) return '620%';
        else if ( this.props.image.class ==  'dealerCard' ) return '350%';
      },
      rotateZ: 0
    });
  }
  render() {
    return (
      <div>
        {
          this.props.image.hasOwnProperty('back') ? (<img ref={this.cardRef} className={this.props.image.class} src={images(`./Cards/${this.props.image.back}.png`)} alt='card'/>)
          : (<img ref={this.cardRef} className={this.props.image.class} src={images(`./Cards/${this.props.image.path}.png`)} alt='card'/>)
        }
      </div>
    )
  }
}

CSS: 

.bet img {
  border-radius: 5%;
  position: absolute;
  z-index: 1000;
  width: 100px;
  height: 150px;
  transform: rotateZ(50deg) translateX(120%) translateY(-650%);
}

В результате элемент просто монтируется в DOM без какой-либо анимации (как будто отображение изменилось с 'none' на 'block'). Подскажите пожалуйста, что я сделал не так и как это исправить? Заранее благодарю за любую помощь!

...