JSPM – react-crossfade@0.1.0

Package Exports

react-crossfade

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-crossfade) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

##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