Appearance
animate
animate.js
Handles all the animation process
export
inner
- configurations :
Object - configHandler()
- CONFIG :
Object - DURATION_REGEX :
RegExp - CALLBACK_TRACKER :
Object - TARGETS_STACK :
Object - getTargetSelector(eventTarget) ⇒
string - getTimeInMs(value) ⇒
number - getTotalAnimTime(element) ⇒
Object - isVisibility(animType) ⇒
boolean - isMotion(animType) ⇒
boolean - removeMotionCssClass(element)
- disable(element)
- enable(element)
- hasIterationProp(element) ⇒
boolean - handleVisibilityToggle(element, args)
- endVisibilityToggle(element, opts)
- initcallback(trigger, fn, type)
- getAction(element, animType) ⇒
string|null - eventHandler(el, animationId, opts) ⇒
function
- configurations :
init(animationId, opts, eventType)
Initiate the event listener with the animation
Kind: static function of animate
See:
| Param | Type | Default | Description |
|---|---|---|---|
| animationId | number | The ID of the animation in *_ANIMS_ID object | |
| opts | Object | All options passed by the user | |
| eventType | string | "click" | The event to attach the animation to |
end(triggerSelector, eventType)
Removes the event listener of all elements represented by the triggerSelector
Kind: static function of animate
| Param | Type | Default | Description |
|---|---|---|---|
| triggerSelector | string | null | A valid CSS selector for the trigger Element. If ommited, CLASS_NAMES.trigger will be used instead. |
| eventType | string | "click" | The event name. If ommited, 'click' is the default value. |
animate(element, action, id, opts)
Handles all the animation process
Kind: static function of animate
See:
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element to animate |
| action | string | 'show', 'hide', or 'move' |
| id | number | ID of an animation in the *_ANIMS_ID objects |
| opts | Object.<string, any> | All the options passed by the user |
preset(el, args)
Sets the CSS properties customized by the user, prior to the begining of the animation
Kind: static function of animate
| Param | Type | Description |
|---|---|---|
| el | HTMLElement | The DOM element being animated |
| args | Object | The animation's ID and type and all the options passed by the user |
isEnabled(element) ⇒ boolean
Verifies if an element is already being animated or not
Kind: static function of animate
Returns: True if the element is not currently being animated
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element to check |
configurations : Object.<string, any>
Contains the default value for each custom option. Those values can be overwritten by the user by calling jsCssAnimations.config() and passing new default values for all the animations.
Kind: inner constant of animate
See: js-css-animations.config()
configHandler
ProxyHandler passed to the CONFIG object to ensure that if an option is not customized by the user, the default value set in configurations.default will be returned instead.
Kind: inner constant of animate
See
CONFIG : Object.<string, any>
Object that handles configurations, either customized by the user or default values defined in configurations.default object
Kind: inner constant of animate
See: configurations
DURATION_REGEX : RegExp
Matches duration or delay CSS properties values
Kind: inner constant of animate
CALLBACK_TRACKER : Object
Keeps track of the callbacks being executed, preventing the callbacks to be executed multiple times if multiple elements are being animated by a single trigger.
When an element triggers an animation, no matter how many elements are being animated, the start() and complete() callbacks should each be executed only once.
Kind: inner constant of animate
- CALLBACK_TRACKER :
Object
CALLBACK_TRACKER.init(trigger)
Initiates the tracker
Kind: static function of CALLBACK_TRACKER
| Param | Type | Description |
|---|---|---|
| trigger | string | A CSS selector representing the element which triggered the animation |
CALLBACK_TRACKER.remove(trigger)
Removes 'trigger' from the tracker
Kind: static function of CALLBACK_TRACKER
| Param | Type | Description |
|---|---|---|
| trigger | string | A CSS selector representing the element which triggered the animation |
TARGETS_STACK : Object
Keeps track of all the targets being animated to ensure that the callback tracker will be removed only when all the targets have been animated. Also ensures that all targets will be re-enabled only when all targets have already been animated.
Kind: inner constant of animate
- TARGETS_STACK :
Object- .add(elem, trigger)
- .remove(trigger)
- .get(trigger) ⇒
Array.<HTMLElement>
TARGETS_STACK.add(elem, trigger)
Adds an element to the stack
Kind: static function of TARGETS_STACK
| Param | Type | Description |
|---|---|---|
| elem | HTMLElement | Element being animated |
| trigger | string | CSS selector for the element that triggered the animation |
TARGETS_STACK.remove(trigger)
Removes from the stack all the elements animated by the same trigger button
Kind: static function of TARGETS_STACK
| Param | Type | Description |
|---|---|---|
| trigger | string | CSS selector for the element that triggered the animation |
TARGETS_STACK.get(trigger) ⇒ Array.<HTMLElement>
Gets all elements included in the stack for a given trigger button
Kind: static function of TARGETS_STACK
Returns: An array of elements that have been animated by the same trigger button
| Param | Type | Description |
|---|---|---|
| trigger | string | CSS selector for the element that triggered the animation |
updateDefaultConfig(opts)
Customize the default animations configurations by overwriting the CONFIG values
Kind: inner method of animate
See: CONFIG
| Param | Type | Description |
|---|---|---|
| opts | Object | All the options customized by the user |
resetDefaultConfig()
Reset the configurations to its default values by removing from CONFIG all options customized by the user
Kind: inner method of animate
See: CONFIG
removeCustomCssProperties(element)
Removes the CSS properties customized by the user
Kind: static function of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element with the custom CSS properties |
setCssProperty(element, property, value)
Sets an inline CSS property
Kind: static function of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element which will receive the property |
| property | string | Property key in the PROPERTY_NAMES object |
| value | string | Value of the CSS Property |
updateCssProperties(element, opts)
Sets the CSS properties customized by the user in the animation function's options
Kind: static function of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element to update the CSS Properties |
| opts | Object.<string, string> | Object containing a custom property key and a CSS value to be updated |
getTargetSelector(eventTarget) ⇒ string
Searches and returns the 'target-selector' attribute
If the element which triggered the event doesn't have the attribute, will bubbles up untill the attribute is found. If no attribute is found, an empty string is returned and so no element will be selected to be animated
Kind: inner method of animate
Returns: The CSS selector for the animation target(s) or an empty string
| Param | Type | Description |
|---|---|---|
| eventTarget | HTMLElement | The DOM element wich triggers the event |
getTimeInMs(value) ⇒ number
Removes the unit from the duration or delay and returns the value in milliseconds
Kind: inner method of animate
Returns: The duration or delay in milliseconds
| Param | Type | Description |
|---|---|---|
| value | string | duration or delay CSS property value |
getTotalAnimTime(element) ⇒ Object
Returns an object with the duration and delay time in milliseconds
Kind: inner method of animate
Returns: Both the duration and delay, in milliseconds
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element being animated |
isVisibility(animType) ⇒ boolean
Returns true if the animation type is 'visibility'
Kind: inner method of animate
Returns: True if animation type is 'visibility'. False otherwise.
| Param | Type | Description |
|---|---|---|
| animType | string | Either 'motion' or 'visibility' |
isMotion(animType) ⇒ boolean
Returns true if the animation type is 'motion'
Kind: inner method of animate
Returns: True if animation type is 'motion'. False otherwise.
| Param | Type | Description |
|---|---|---|
| animType | string | Either 'motion' or 'visibility' |
removeMotionCssClass(element)
Removes the current motion animation CSS class from the element
Kind: inner method of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element being animated |
disable(element)
Sets an attribute to indicate that the element is currently being animated and so can not perform any other animations
Kind: inner method of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element being animated |
enable(element)
Removes the attribute that indicates that an element is currently being animated
Kind: inner method of animate
| Param | Type |
|---|---|
| element | HTMLElement |
hasIterationProp(element) ⇒ boolean
Verifies if an element has defined an iteration CSS property
Kind: inner method of animate
Returns: True if the element has an iteration CSS property set, False otherwise
| Param | Type |
|---|---|
| element | HTMLElement |
handleVisibilityToggle(element, args)
Sets the parent element dimensions, if needed.
Removes the collapsed or hidden class from the element, when necessary
Kind: inner method of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element being animated |
| args | Object | All the necessary arguments |
endVisibilityToggle(element, opts)
Adds the hidden or collapsed class, when necessary. Finalize parent element's resize operations, if needed.
Kind: inner method of animate
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element being animated |
| opts | Object | All the necessary options |
initCallback(trigger, fn, type)
Executes a given callback, checking, when necessary, if the callback was already executed by another element being animated by the same trigger button
Kind: inner method of animate
| Param | Type | Description |
|---|---|---|
| trigger | string | The CSS selector of the element that triggered the animation |
| fn | function | The callback to execute |
| type | string | Either 'start' or 'complete' |
getAction(element, animType) ⇒ string | null
Checks which animation CSS class is set to determine wich action to perform next
Kind: inner method of animate
Returns: 'show' or 'hide' or 'move' or 'moveBack'
| Param | Type | Description |
|---|---|---|
| element | HTMLElement | The DOM element being animated |
| animType | * | Either 'motion' or 'visibility' |
eventHandler(el, animationId, opts) ⇒ function
Generates the handler function to be passed to the event listener
Kind: inner method of animate
Returns: A function to be passed to the addEventListener() as a handler
See:
| Param | Type | Description |
|---|---|---|
| el | HTMLElement | The DOM element being animated |
| animationId | number | The ID of the animation in the *_ANIMS_ID |
| opts | Object | The options passed by the user |