Question

场景是：我想根据用户是否点击＆＃34; next＆＃34;来为不同方向制作一系列类似google-like的卡片。或＆＃34;之前＆＃34;。

CSSTransitionGroup在一个方向上的动画很容易 - 我有＆＃34;下一个＆＃34;按钮触发当前卡片向上滑动并消失（下一张卡片从下面向上滑动）。

但是，我也想要＆＃34;之前的＆＃34;按钮设置相反的过渡动画，即当前卡片向下滑动（以及前一张卡片向下滑动）。

问题的症结在于CSSTransitionGroup应该保持挂载状态。我可以轻松地使用<CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'}之类的内容并使下一个/上一个按钮调用setState({isForward: ...})，但这似乎不起作用，可能是因为CSSTransitionGroup必须重新渲染。

我用CSSTransitionGroup描述的是什么？

Answer 1

是的，但不是通过更改转换名称，而是通过在每个方向上使用不同的类包装所有转换名称：

如果说卡片从左侧进纸并出现在中心，则在右侧被解雇。

JSX：

<div className={"wrapper" + animationDirection} >
    <ReactCSSTransitionGroup
        transitionName="card"
        transitionEnterTimeout={200}
        transitionLeaveTimeout={200}>
        {cards}
    </ReactCSSTransitionGroup>
</div>

SCSS：

.wrapper.adding-cards {
    .card {
        &.card-enter {
            // set to left position
        }

        &.card-enter.card-enter-active {
            // set to center position
        }

        &.card-leave-active {
            // set to right position
        }
    }
}

.wrapper.removing-cards {
    .card {
        &.card-enter {
            // set to right position
        }

        &.card-enter.card-enter-active {
            // set to center position
        }

        &.card-leave-active {
            // set to left position
        }
    }
}

是否可以根据状态使用CSSTransitionGroup以两种不同的方式进行动画处理？

1 个答案: