2.4.7 • Published 4 years ago
rc-banner-anim-strict-mode v2.4.7
rc-banner-anim
React BannerAnim Component
Browser Support
 |  |  |  |  |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Development
npm install
npm startExample
http://localhost:8012/examples/
online example: http://react-component.github.io/banner-anim/
install
Usage
var BannerAnim = require('rc-banner-anim');
var React = require('react');
const { Element } = BannerAnim;
const BgElement = Element.BgElement;
React.render(<BannerAnim>
<Element key="a">
<BGElement key="bg" style={{ background: 'url(img)' }}/>
<TweenOne key='0'>test text</TweenOne>
</Element>
<Element key="b">
<BGElement key="bg" style={{ background: 'url(img)' }}/>
<TweenOne key='0'>test text</TweenOne>
</Element>
</BannerAnim>, container);API
BannerAnim
`ref` control jump: <BannerAnim ref={(c) => { this.banner = c; }}/>
prev: this.banner.prev();
next: this.banner.next();
jump: this.banner.slickGoTo(number); number from 0;| name | type | default | description |
|---|---|---|---|
| type | string / array | All animType | Provide across, vertical, acrossOverlay, verticalOverlay, (gridBar, grid) => duration is a single block of animation time, video bg no use |
| duration | number | 450 | Single switch time. |
| delay | number | 0 | switch delay. |
| ease | string | easeInOutQuad | easing. |
| initShow | number | 0 | start show |
| arrow | boolean | true | Arrow is children, this is null and void. else is default arrow |
| thumb | boolean | true | ^ |
| autoPlay | boolean | false | auto play |
| autoPlaySpeed | number | 5000 | auto play delay |
| autoPlayEffect | boolean | true | auto play when mouse leave |
| onChange | func | - | onChange(before or after, currentShowInt) |
| prefixCls | string | - | user class |
| children | react.component | - | Element(must), Arrow, Thumb |
| sync | boolean | false | Element the children and Element the same time animation |
| dragPlay | boolean | true | drag play next or prev |
| component | string | 'div' | component tag |
Element
children is
TweenOne, animation type mustfrom;
| name | type | default | description |
|---|---|---|---|
| leaveChildHide | boolean | false | children leave switch animation. Replace the hideProps. |
| sync | boolean | false | children and Element the same time animation |
| prefixCls | string | - | user class |
| followParallax | object | null | follow mouse anim |
| component | string | 'div' | component tag |
| componentProps | object | null | component is React.Element, component tag props, not add style |
followParallax is object
| name | type | default | description |
|---|---|---|---|
| delay | number | null | open followParallax delay |
| data | array | null | content: { key: string, value: number, type: array or string, bgPosition: string }; key: children key; value: animation interval value, example: value is 20 => left: -20, center: 0 , right: 20 ; type: style or x y, bgPosition: if type is backgroundPosition, this is bg default position, else is invalid. |
| ease | string | easeOutQuad | animate ease. refer |
| minMove | number | null | ease.easeInOutQuad(start, minMove, 1, end); The mouse to move once, the minimum point of moving graphics, a second to reach the position of the mouse. |
Element.BgElement
| name | type | default | description |
|---|---|---|---|
| className | string | - | className |
| scrollParallax | object | null | { y: 100 }, from bottom to top of browser, element leave display area y is 100 |
| videoResize | boolean | true | children is video, video follow window resize |
| component | string | 'div' | component tag |
| componentProps | object | null | component is React.Element, component tag props, not add style |
Arrow
| name | type | default | description |
|---|---|---|---|
| arrowType | 'prev' | 'next' | - | arrow type |
| prefixCls | string | - | user class |
| component | string / React.Element | div | component tag |
| componentProps | object | null | component is React.Element, component tag props, not add style |
Thumb
| name | type | default | description |
|---|---|---|---|
| children | React.Element | - | must |
| prefixCls | string | - | user class |
| component | string / React.Element | div | component tag |
| componentProps | object | null | component is React.Element, component tag props, not add style |