我正在用 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 不会导致问题滑出,而只会导致它消失?
谢谢!
最佳答案
您的示例在我的浏览器中不起作用(我收到 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 动画效果更好。
关于css - ReactCSSTransitionGroup 的麻烦 - 试图获得平滑的滑入/滑出动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37551071/