diff --git a/README.md b/README.md index c12765e..9f96ba5 100644 --- a/README.md +++ b/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. diff --git a/src/cta.js b/src/cta.js index 13ee596..d8588f9 100644 --- a/src/cta.js +++ b/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.