Add onTransitionEnd callback. Resolve #111

README.md

@@ -27,6 +27,7 @@ All attributes are optional.
 - `auto` {Boolean} `true` or `false` (`false` by default) toggle auto sliding.
 - `interval` {Number} (`4000`ms by default) interval for auto sliding.
 - `duration` {Number} (`300`ms by default) duration for animation.
+- `onTransitionEnd` {Function({ prev: HTMLElement, current: HTMLElement, next: HTMLElement})} on frames transition end callback.
 - `widgets` {Array of ReactClass} Indicator and switcher could be various,
   so it's not builtin. Here's some example custom widgets
   ([dots indicator](src/indicator-dots.js),

src/carousel.js

@@ -247,12 +247,16 @@ class Carousel extends React.Component {
     }, cb)
   }
 
-  prepareSiblingFrames () {
-    const siblings = {
+  getSiblingFrames () {
+    return {
       current: this.refs['f' + this.getFrameId()],
       prev: this.refs['f' + this.getFrameId('prev')],
       next: this.refs['f' + this.getFrameId('next')]
     }
+  }
+
+  prepareSiblingFrames () {
+    const siblings = this.getSiblingFrames()
 
     if (!this.props.loop) {
       this.state.current === 0 && (siblings.prev = undefined)
@@ -289,7 +293,7 @@ class Carousel extends React.Component {
 
   transitFramesTowards (direction) {
     const { prev, current, next } = this.state.movingFrames
-    const { duration, axis } = this.props
+    const { duration, axis, onTransitionEnd } = this.props
 
     let newCurrentId = this.state.current
     switch (direction) {
@@ -324,6 +328,8 @@ class Carousel extends React.Component {
         }
     }
 
+    onTransitionEnd && setTimeout(() => onTransitionEnd(this.getSiblingFrames()), duration)
+
     this.setState({ current: newCurrentId })
   }
 
@@ -382,7 +388,8 @@ Carousel.propTypes = {
   widgets: PropTypes.arrayOf(PropTypes.func),
   frames: PropTypes.arrayOf(PropTypes.element),
   style: PropTypes.object,
-  minMove: PropTypes.number
+  minMove: PropTypes.number,
+  onTransitionEnd: PropTypes.func
 }
 
 Carousel.defaultProps = {