##React-crossfade

React.js-компонент, который позволяет легко анимировать замещение одного DOM-элемента другим.

Использует ReactCSSTransitionGroup, но запускает появление следующего элемента только после полного исчезновения предыдущего

##Installation

$ npm install react-crossfade -save

##Usage

<Crossfade transitionName="example" transitionLeaveTimeout={400} transitionEnterTimeout={400}>
	{this.state.isElementSwitched ? 
		<div className="element" key={1}>B</div>
		:
		<div className="element" key={0}>A</div>
	}
</Crossfade>

###Params

• transitionName - названия namespace'a для CSS классов
• transitionLeaveTimeout - длительность анимации исчезновения старого DOM-элемента
• transitionEnterTimeout - длительность анимации появления нового DOM-элемента (начнется только после окончания transitionLeaveTimeout)

Содержимым компонента должен являться один DOM-элемент или null
Анимация сработает, если у элементов будут разные параметры key, иначе замещение анимироваться не будет

###CSS

В CSS необходимо описать анимацию, использую transitionName в названиях классов

.example-enter {
	opacity: 0;
}

.example-enter.example-enter-active {
	transition: opacity 400ms ease;
	opacity: 1;
}

.example-leave {
	opacity: 1;
}

.example-leave.example-leave-active {
	transition: opacity 400ms ease;
	opacity: 0;
}

##Demo

mvanikanov.ru/react-crossfade/

####Для запуска примера:

• $ git clone https://github.com/m-anikanov/react-crossfade.git
• открыть example/index.html

####Для запуска сборки: $ npm install

• $ npm run example - запустить сборку example c флагом watch
• $ npm run build - пересобрать react-crossfade

##License

MIT