Merge pull request #17 from everdimension/extra_transition_duration_fix

Make extraTransitionDuration available through the public API

README.md

@@ -74,6 +74,7 @@ Animate an element `sourceElement` onto `targetElement`.
 * `options` - A map of additional options to control the animation behaviour.
 	* `duration` - Duration (in seconds) of animation. Default is `0.3` seconds.
 	* `targetShowDuration` - Duration (in seconds) of `targetElement` to become visible, if hidden initially. The library will automatically try to figure this out from the element's computed styles. Default is `0` seconds.
+	* `extraTransitionDuration` - Extra duration (in seconds) of `targetElement` to provide visual continuity between the animation and the rendering of the `targetElement`. Default is `1` second.
 	* `relativeToWindow` - Set to true if your target element is fixed positioned in the window. Default is relative to document (works good with normal elements).
 * `callback` - Optional callback to execute after animation completes.
 

src/cta.js

@@ -103,13 +103,13 @@
 			triggerBackground,
 			targetBounds,
 			triggerBounds,
-			dummy,
-			extraTransitionDuration = 1;
+			dummy;
 
 		options = options || {};
 		options.duration = options.duration || defaults.duration;
 		options.targetShowDuration = options.targetShowDuration || getAnimationTime(target) || defaults.targetShowDuration;
 		options.relativeToWindow = options.relativeToWindow || defaults.relativeToWindow;
+		options.extraTransitionDuration = options.extraTransitionDuration || defaults.extraTransitionDuration;
 
 		// Set some properties to make the target visible so we can get its dimensions.
 		// Set `display` to `block` only when its already hidden. Otherwise changing an already visible
@@ -169,11 +169,11 @@
 				callback(target);
 			}
 			// Animate the dummy element to zero opacity while the target is getting rendered.
-			dummy.style.transitionDuration = (options.targetShowDuration + extraTransitionDuration) + 's';
+			dummy.style.transitionDuration = (options.targetShowDuration + options.extraTransitionDuration) + 's';
 			dummy.style.opacity = 0;
 			setTimeout(function () {
 				dummy.parentNode.removeChild(dummy);
-			}, (options.targetShowDuration + extraTransitionDuration) * 1000);
+			}, (options.targetShowDuration + options.extraTransitionDuration) * 1000);
 		});
 
 		// Return a reverse animation function for the called animation.