Modules

js-css-animations.js

Builds the animation API that will be exported to the final user

• export

  • jsCssAnimations : Object.<string, (function()|object)>

• inner

  • config(opts)
  • reset()
  • animationFunctions : Object
  • eventBoundAnimations : Object.<string, function()>
  • verifyAnimationName : ProxyHandler
    • .get(animations, name)
  • selectElement(selector) ⇒ HTMLElement
  • selectAllElements(selector) ⇒ NodeList.<Element>
  • getTargets(selector) ⇒ NodeList.<Element> | Array.<HTMLElement>
  • toggle(selector, animA, animB, opts)
    • element
  • isTransformed(selector) ⇒ boolean
  • checkVisibility(selector, mode) ⇒ boolean
  • isVisible(selector) ⇒ boolean
  • isHidden(selector) ⇒ boolean

jsCssAnimations : Object.<string, (function()|Object)>

An API encapsulating all the functions that can be used by the user, like all the animations functions and auxiliary functions like: isTransformed(), isVisible() and isHidden()

Kind: inner constant of js-css-animations

config(opts)

Default values used by all animations are set by the user by overriding default animations properties and options

Kind: inner method of js-css-animations
See

• globals.PROPERTY_NAMES
• animate.configurations

Param	Type	Description
opts	Object	All custom animation properties and options.

reset()

Resets default animations values by removing default values customized by the user

Kind: inner method of js-css-animations

animationFunctions : Object

An object containing all the animations functions.

Visibility animations functions are under animationFunctions.hide and animationFunctions.show

All other keys of animationFunctions are Motion animations functions

Kind: inner constant of js-css-animations

See:

• globals.VISIBILITY_ANIMS_ID
• globals.MOTION_ANIMS_ID

eventBoundAnimations : Object.<string, function()>

An object containing animations functions wich are triggered by an event (like 'click')

Kind: inner constant of js-css-animations

verifyAnimationName : ProxyHandler

Will throw an ReferenceError if the animation name does not corresponds to any animation function

Kind: inner constant of js-css-animations

verifyAnimationName.get(animations, name)

Kind: static method of verifyAnimationName

Param	Type	Description
animations	Object.<string, function()>	Object containing animation functions
name	string	Name of the animation

selectElement(selector) ⇒ HTMLElement

If 'selector' is a string containing a valid CSS selector, it will be used to perform a querySelector(), If 'selector' is already an HTMLElement it will be returned as it is.

Kind: inner method of js-css-animations

Returns: An HTMLElement

Param	Type	Description
selector	Element | string	If it's an HTMLElement, 'selector' will be returned as it is. If it's a string, it should be a valid CSS selector

selectAllElements(selector) ⇒ NodeList.<Element>

Returns a NodeList with all elements that match 'selector'

Kind: inner method of js-css-animations

Returns: A NodeList containing all elements matched by the 'selector'

Param	Type	Description
selector	string	A valid CSS selector to be passed to querySelectorAll()

getTargets(selector) ⇒ NodeList.<Element> | Array.<HTMLElement>

Gets the element(s) to be animated. The user can pass either an HTMLElement or a CSS selector as a target to the animation

Kind: inner method of js-css-animations

Returns: An array containing a single HTMLElement or a NodeList with all the elements matching the CSS selector in 'selector'

Param	Type	Description
selector	HTMLElement | string	An HTMLElement or a valid CSS selector to be passed to querySelectorAll()

toggle(selector, animA, animB, opts)

Toggles between two animations.

If 'animA' and 'animB' have the same name, it will toggle between the 'hide' state and the 'show' state, although this is only applicable to visibility animations.

Kind: inner method of js-css-animations

See: globals.VISIBILITY_ANIMS_ID

Param	Type	Description
selector	HTMLElement | string	The DOM element or a valid CSS selector with the element(s) to be animated
animA	string	The initial animation name
animB	string	The next animation name
opts	Object | Object	All options that can be passed by the user to customize the animation

toggle~element

The current animation attribute will only be set in the first element that matches the 'selector' passed, but the animation will apply to all elements matched by 'selector'

Kind: inner constant of toggle

isTransformed(selector) ⇒ boolean

Verifies if an element is out of its original orientation or scale.

Note that if the element has CSS property 'transform: rotate(0deg)', isTransformed() will still return False, as the element is not out of its original orientation.

Kind: inner method of js-css-animations

Returns: True if the element was rotated from its original orientation. False if it maintains the original orientation.

Param	Type	Description
selector	HTMLElement | string	An element or a valid CSS selector corresponding to the element

checkVisibility(selector, mode) ⇒ boolean

Verifies if a given element is hidden or visible

Kind: inner method of js-css-animations

Returns: boolean - True or False depending if the element is visible or hidden, according to the 'mode' passed

Param	Type	Description
selector	Element | string	An element or a valid CSS selector corresponding to the element
mode	string	Either 'visible' or 'hidden'

isVisible(selector) ⇒ boolean

Kind: inner method of js-css-animations

Returns: True if the element is visible, False otherwise

Param	Type	Description
selector	Element | string	Dom element or a valid CSS selector

isHidden(selector) ⇒ boolean

Kind: inner method of js-css-animations

Returns: True if the element is hidden, False otherwise

Param	Type	Description
selector	Element | string	Dom element or a valid CSS selector