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

Question

我正在用 React 编写问卷系统，希望问题能够顺利地进出。

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

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 动画效果更好。