Question

我有一个卡片组件，当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>
    )
  }
}

和CSSTransitionGroup的CSS类：

.icon-appear {
  opacity:  0.01;
}

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

此代码可用于在单击卡时渲染复选图标并应用动画（3000毫秒就是这样，因此我可以确保它在那里并激活）。再次单击（取消选择）卡后，复选图标立即消失。我想在此阶段淡出选中图标。

我在寻找答案时发现了这个问题： https://stackoverflow.com/questions/46916118/conditional-rendering-and-reactcsstransitiongroup-animation#=。您可以看到我在哪里注释了“检查”的条件分配。它会显示/隐藏选中图标，但不会应用动画。

Answer 1

您可以使用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>

style.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中看到。希望对您有帮助

在条件渲染的组件上使用CSSTransitionGroup反应动画淡入和淡出

1 个答案: