varBannerAnim=require('rc-banner-anim');varReact=require('react');const{ Element }=BannerAnim;constBgElement=Element.BgElement;React.render(<BannerAnim><Elementkey="a"><BGElementkey="bg"style={{background: 'url(img)'}}/><TweenOnekey='0'>test text</TweenOne></Element><Elementkey="b"><BGElementkey="bg"style={{background: 'url(img)'}}/><TweenOnekey='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 must from;
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 xy, bgPosition: if type is backgroundPosition, this is bg default position, else is invalid.