React在条件渲染组件上使用CSSTransitionGroup设置淡入淡出动画

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;
}

这段代码用于在点击卡片时渲染复选框图标并应用动画(3000ms是这样，我可以确保它在那里并激活(。当再次单击(取消选择(卡片时，复选图标立即消失。我想在这个阶段淡出复选框图标。

我在搜索答案时发现：https://stackoverflow.com/questions/46916118/conditional-rendering-and-reactcsstransitiongroup-animation#=。你可以看到我在哪里注释掉了"check"的条件赋值。它渲染/隐藏复选图标，但不应用动画。

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中看到。希望它能帮助