ReactCSSTransitionGroup 麻烦 - 试图获得平滑的滑入/滑出动画

Question

我正在编写一个响应式问卷系统，并希望让问题顺利进出。

这是我的组件的渲染方法，用于显示其中的问题。

render () {
    const { loadingQuestion, question, userId, actions } = this.props;

    const q = this.renderQuestion(question, (...args) => actions.answerQuestion(userId, ...args), (...args) => actions.skipQuestion(userId, ...args));
    return (
        <ul className="questions">
            <ReactCSSTransitionGroup
                transitionName="question"
                transitionEnterTimeout={1000}
                transitionLeaveTimeout={1000}
            >
                {q}
            </ReactCSSTransitionGroup>
        </ul>
    );
}

还有我目前用来实现垂直过渡的css：

.question-enter {
    transform: translateY(100%);
}
.question-enter.question-enter-active {
    transform: translateY(0%);
    transition: transform 1000ms ease-in-out;
}
.question-leave {
    transform: translateY(0%);
}
.question-leave.question-leave-active {
    transform: translateY(-100%);
   transition: transform 1000ms ease-in-out;
}

这是一个指向显示当前行为的页面的链接： http://price-it.co:8080/frame

有谁知道为什么这个 css 不会导致问题滑出而只是导致它消失？

谢谢！

Answer 1

您的示例无法在我的浏览器中运行（我收到 app.js:12Redux DevTools could not render. Did you forget to include DevTools.instrument() in your store enhancer chain before using createStore()? 错误）。

但我可以说我对CSSTransitionGroup 有同样的体验，所以我决定改用<TransitionGroup> 和Velocity - 当然它更具有jQuery 风格，但它显然比css 更好用动画。