diff --git a/src/Animate/StackAnimates.js b/src/Animate/StackAnimates.js
index 826ed1f..218da30 100644
--- a/src/Animate/StackAnimates.js
+++ b/src/Animate/StackAnimates.js
@@ -3,43 +3,46 @@ import * as Utils from './Utils';
class StackAnimates extends PureComponent {
constructor(props) {
- super(props);
+ super(props);
this.state = Utils.buildState(props);
}
get getNextIndex() {
- return this.state.index +1;
+ return this.state.index + 1;
}
get getNextStartTime() {
- const time = Utils.convertToMs(parseFloat(Utils.removeUnit(this.state.duration)));
- const delay = Utils.convertToMs(parseFloat(Utils.removeUnit(this.state.delay)));
+ const time = Utils.convertToMs(
+ parseFloat(Utils.removeUnit(this.state.duration))
+ );
+ const delay = Utils.convertToMs(
+ parseFloat(Utils.removeUnit(this.state.delay))
+ );
return time + delay;
}
-
- get HaveMoreAnimations() {
+
+ get HasMoreAnimations() {
return this.getNextIndex < this.props.Animation.length;
}
renderNextAnimate() {
- if (this.HaveMoreAnimations) {
+ if (this.HasMoreAnimations) {
setTimeout(() => {
- this.setState(
- Utils.buildState(this.props, this.getNextIndex),
- () => this.renderNextAnimate()
+ this.setState(Utils.buildState(this.props, this.getNextIndex), () =>
+ this.renderNextAnimate()
);
}, this.getNextStartTime);
+ } else if (this.props.onAnimationDone) {
+ setTimeout(() => {
+ this.props.onAnimationDone();
+ }, this.getNextStartTime);
}
}
render() {
const { Animation } = this.state;
- return (
-
- {this.props.children}
-
- );
+ return {this.props.children};
}
componentDidMount() {
@@ -47,4 +50,4 @@ class StackAnimates extends PureComponent {
}
}
-export default StackAnimates;
\ No newline at end of file
+export default StackAnimates;
diff --git a/stories/Animate.stories.js b/stories/Animate.stories.js
index cce56f9..927bada 100644
--- a/stories/Animate.stories.js
+++ b/stories/Animate.stories.js
@@ -2,30 +2,46 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import FullView from '../Example/FullView';
import Card from '../Example/Card';
-import Animate, {
- Flash,
- Bounce,
- FadeOut,
- FadeIn
-} from '../src';
-
+import Animate, { Flash, Bounce, FadeOut, FadeIn } from '../src';
storiesOf('Animate (HOC)', module)
- .add('Multiple Animations', () => (
-
-
-
- card content...
-
-
-
- ))
- .add('Multiple Animations with diferent times and delays', () => (
-
-
-
- card content...
-
-
-
- ));
\ No newline at end of file
+ .add('Multiple Animations', () => (
+
+
+
+ card content...
+
+
+
+ ))
+ .add('Multiple Animations with diferent times and delays', () => (
+
+
+
+ card content...
+
+
+
+ ))
+ .add('with onAnimationDone callback', () => (
+
+ alert('animation finished!')}
+ >
+
+ card content...
+
+
+
+ ));