React-Redux CSS转换
React-Redux CSS转换
提问于 2016-05-23 18:43:58
我想保留一切，包括Redux store中的UI状态，比如部分展开/折叠状态。我有一个包含表的部分，当用户单击标题时，toggleGroup操作被调度，组的collapsed标志被切换，这导致重新呈现，这实际上替换了DOM节点，而不是切换类，这应该会更改转换的CSS属性，并且我的转换不起作用。
<div className={classNames({'DealGroup_collapsed': this.props.collapsed})}>
<div onClick={DISPATCH TOGGLE GROUP ACTION}>
{this.props.caption}
</div>
<div className="DealGroup__wrap">
<SimpleTable className="DealGroup__table" {...{columns, rows}}/>
</div>
</div>在Redux store中存储UI状态时，是否可以进行CSS转换？
回答 1
Stack Overflow用户
发布于 2016-05-23 20:08:37
你已经看过ReactCSSTransitionGroup了吗？我不知道这是否是您想要的，但是将您的组件包装在这样一组CSS类中以进行转换处理会得到应用。简单的例子：
<ReactCSSTransitionGroup
transitionName="your-transition-name"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>在CSS中，按如下方式定义转换：
.your-transition-name-enter {
opacity: 0.01;
}
.your-transition-name-enter.your-transition-name-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.your-transition-name-leave {
opacity: 1;
}
.your-transition-name-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}React将项目保留在DOM中，直到转换完成。
另请参阅：
https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup https://www.npmjs.com/package/react-addons-css-transition-group
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37388885
复制相关文章
相似问题
腾讯云开发者
