我可以使用ReactCSSTransitionGroup
中的react-addons-css-transition-group
和React内联样式吗?如果是这样,怎么样?
我正在处理的组件:
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { removeNotification } from '../actionCreators'
import Notification from './Notification'
const mapStateToProps = state => ({
notifications: state.notifications
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ removeNotification }, dispatch)
})
class Notifications extends Component {
render() {
var style = {
position: 'fixed',
top: 20,
right: 20,
width: 300,
zIndex: 99
}
var tstyle = {
'notification-enter': {
visibility: 'hidden',
transform: 'translate3d(100%,0,0)'
},
'notification-leave': {
visibility: 'visible',
transform: 'translate3d(0,0,0)'
},
'notification-enter-notification-enter-active': {
visibility: 'visible',
transform: 'translate3d(0,0,0)',
transition: 'all 0.4s'
},
'notification-leave-notification-leave-active': {
visibility: 'hidden',
transform: 'translate3d(100%,0,0)',
transition: 'all 0.4s'
}
}
return (
<ul style={style}>
<ReactCSSTransitionGroup
style={tstyle}
transitionName='notification'
transitionEnterTimeout={400}
transitionLeaveTimeout={400}>
{this.props.notifications.map((notification, index) => {
return <Notification
key={index}
type={notification.type}
message={notification.message}
timeout={10000}
remove={this.props.actions.removeNotification} />
})}
</ReactCSSTransitionGroup>
</ul>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Notifications)
答案 0 :(得分:3)
ReactCSSTransitionGroup与内联样式不兼容,因为它向/从DOM节点添加或删除类名以触发转换。但是你可以使用ReactTransitionGroup创建自己的组件来完成ReactCSSTransitionGroup所做的事情,但是使用内联样式。
如果你不想开发自己的,你可以使用我之前写的一个用npm安装它:ReactInlineTransitionGroup。
它比ReactCSSTransitionGroup有一些优势,比如你可以编写CSS转换并且不用担心在组件中设置超时属性,并且你可以通过回调来检查孩子何时进入或离开你的组。
答案 1 :(得分:0)
这样做
style={{
// flex: over ? 1 : null,
display: 'flex',
width: wide ? 400 : null,
paddingBottom: wide ? 500 : null,
border: over ? '4px solid greenyellow' : null,
borderRadius: wide ? 30 : null,
paddingVertical: over ? 500 : null,
background: over ? 'black' : 'white',
transition:
'background 500ms',
cursor: 'pointer',
}}
或者如果您想获得多个属性
style={{
display: 'flex',
width: wide ? 400 : null,
paddingBottom: wide ? 500 : null,
border: over ? '4px solid greenyellow' : null,
borderRadius: wide ? 30 : null,
paddingVertical: over ? 500 : null,
background: over ? 'black' : 'white',
transition:
'background 500ms, padding 500ms, width 500ms, border 500ms',
cursor: 'pointer',
}}