Question

我试图整合ReactCSSTransitionGroup以获得一些非常基本的淡入/淡出动画，但没有为孩子添加类。在控制台中没有任何帮助。我做了一些明显的错误吗？

import React from 'react';
import { connect } from 'react-redux'
import history from '../history'
import { Map } from 'immutable'
import ReactCSSTransitionGroup from 'react/lib/ReactTransitionGroup'

import TwitchChannel from './twitchChannel'
import TwitchChannelAddForm from './twitchChannelAddForm'

const component = React.createClass({

	render: function() {
		return (
			<div>
				<TwitchChannelAddForm />
				<ReactCSSTransitionGroup transitionName="animation" transitionAppear={true}>
					{this.props.channels.map(ch => 
						<TwitchChannel channel_id={ch.get('id')} key={ch.get('id')} />
					)}
				</ReactCSSTransitionGroup>
			</div>
		)
	}
})

function mapStateToProps(state) {
	return {
  		channels: state.getIn(['twitch', 'channels'], Map({})).toArray()
	}
}

export default connect(mapStateToProps)(component)

的CSS

animation-enter {
  opacity: 0.01;
}
.animation-enter.animation-enter-active {
  opacity: 1;
  transition: opacity 2s ease-in;
}

Answer 1

好的，所以我发现了这个问题。

当我尝试导入＆＃39; react-addons-transition-group＆＃39;时，我收到了一个错误消息。包含npm所以我直接引用了包（＆＃39; react / lib / ReactTransitionGroup＆＃39;）。这修复了所有错误，但代码本身也无法正常工作。

在搜索完npm后，我找到了包裹＆＃39; react-addons-css-transition-group＆＃39;安装和导入后，我让它工作。

ReactCSSTransitionGroup不添加任何类

1 个答案: