animate.md

title
animate

animate

animate.js

Handles all the animation process

• export

  • init(animationId, opts, eventType)
  • end(triggerSelector, eventType)
  • animate(element, action, id, opts)
  • preset(el, args)
  • isEnabled(element) ⇒ boolean
  • removeCustomCssProperties(element)
  • setCssProperty(element, property, value)
  • updateCssProperties(element, opts)
  • updateDefaultConfig(opts)
  • resetDefaultConfig()

• 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

init(animationId, opts, eventType)

Initiate the event listener with the animation

Kind: static function of animate

See:

• globals.VISIBILITY_ANIMS_ID
• globals.MOTION_ANIMS_ID

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:

• globals.VISIBILITY_ANIMS_ID
• globals.MOTION_ANIMS_ID

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
• configurations

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
  • .init(trigger)
  • .remove(trigger)
  • .executing : 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

See: globals.PROPERTY_NAMES

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:

• globals.VISIBILITY_ANIMS_ID
• globals.MOTION_ANIMS_ID

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