Реакция анимации постепенного появления и исчезновения с CSSTransitionGroup на условно отображаемом компоненте - PullRequest
Новая
       43

Реакция анимации постепенного появления и исчезновения с CSSTransitionGroup на условно отображаемом компоненте

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

У меня есть компонент карты, который условно отображает значок проверки, если this.state.isSelected равно true. Я хочу анимировать значок чека при рендеринге. Я также хочу анимировать его, когда он уходит.

У меня есть следующий компонент класса: 

import { CSSTransitionGroup } from 'react-transition-group';

export default class AdoptablesFilterCard extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isSelected: false,
      cardHeader: props.cardHeader,
      cardType: props.cardType,
    }

    //Click handler binding
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (e) => { //switches the state 'isSelected' when clicked
    this.setState((prevState) => ({
      isSelected: !prevState.isSelected
    }))
  }

  render() {
    const {isSelected} = this.state;
    // let check;
    // {isSelected ? 
    const check = <i className="far fa-check-circle" 
                             key={this.state.cardHeader}></i>;

                             //:
                             //check = <div key={this.state.cardHeader}></div>}

    return (
      <div className="adoptables-filter-card" onClick={this.handleClick} ref={this.myRef}>
        <div className="adoptables-filter-card-header">
          {this.props.cardHeader}
        </div>

        <div className="adoptables-filter-card-body">
          {(() => {
            switch (this.props.cardType) {
              case "animal": return(<i className={`fas fa-${this.props.cardHeader}`}></i>)
              case "color": return(<div className="color-splotch" style={{background: this.props.cardHeader}}></div>)
            }
          })()}
        </div>

        {isSelected ? <CSSTransitionGroup
                        transitionName="icon"
                        transitionAppear={true}
                        transitionAppearTimeout={3000}
                        transitionEnter={false}
                        transitionLeave={false}>
                        {check}
                      </CSSTransitionGroup>
                      : null} 
      </div>
    )
  }
}

и CSS классы для CSSTransitionGroup: 

.icon-appear {
  opacity:  0.01;
}

.icon-appear.icon-appear-active {
  opacity: 1;
  // transform: rotateY(360deg);
  transition: opacity 3000ms ease-in;
}

Этот код работает для рендеринга значка проверки при нажатии карты и применения анимации (3000 мс, поэтому я могу убедиться, что она есть и активируется). При повторном нажатии на карту (отмене выбора) значок галочки немедленно исчезает. Я бы хотел на этом этапе исчезнуть значок проверки.

Я нашел это во время поиска ответа: { ссылка } = . Вы можете увидеть, где я прокомментировал условное присвоение 'check'. Он отображает / скрывает значок проверки, но анимация не применяется.

1 Ответ

0 голосов
/ 02 апреля 2020

Вы можете использовать CSSTransition . Замените этот 

{isSelected ? <CSSTransitionGroup
                    transitionName="icon"
                    transitionAppear={true}
                    transitionAppearTimeout={3000}
                    transitionEnter={false}
                    transitionLeave={false}>
                    {check}
                  </CSSTransitionGroup>
                  : null}

на 

<CSSTransition 
    unmountOnExit
    in={isSelected}
    timeout={2000}
    classNames="icon">
    {check}
</CSSTransition>

стиль. css

.icon-enter {
   opacity: 0;
}
.icon-enter-active {
  opacity: 1;
  transition: opacity 2000ms;
}
.icon-exit {
  opacity: 1;
}
.icon-exit-active {
  opacity: 0;
  transition: opacity 2000ms;
}

Вы можете увидеть в CodeSandBox . Надеюсь, это поможет

...