@@ -4,166 +4,172 @@ title: js-css-animations
4
4
5
5
# js-css-animations
6
6
7
- < a name = " module_js -css-animations" ></ a >
7
+ ## js -css-animations.js
8
8
9
- ## js-css-animations
10
9
Builds the animation API that will be exported to the final user
11
10
11
+ - [ js-css-animations] ( #js-css-animations )
12
+ - [ animationFunctions] ( #animationfunctions ) : <code >Object</code >
13
+ - [ eventBoundAnimations] ( #eventboundanimations ) : <code >Object.< ; string, function()> ; </code >
14
+ - [ verifyAnimationName] ( #verifyanimationname ) : <code >ProxyHandler</code >
15
+ - [ .get(animations, name)] ( #verifyanimationname-get-animations-name )
16
+ - [ jsCssAnimations] ( #jscssanimations ) : <code >Object.< ; string, (function()\| object)> ; </code >
17
+ - [ selectElement(selector)] ( #selectelement-selector ) ⇒ <code >HTMLElement</code >
18
+ - [ selectAllElements(selector)] ( #selectallelements-selector ) ⇒ <code >NodeList.< ; Element> ; </code >
19
+ - [ getTargets(selector)] ( #gettargets-selector ) ⇒ <code >NodeList.< ; Element> ; </code > \| <code >Array.< ; HTMLElement> ; </code >
20
+ - [ toggle(selector, animA, animB, opts)] ( #toggle-selector-anima-animb-opts )
21
+ - [ element] ( #toggle-element )
22
+ - [ checkTransform(selector)] ( #checktransform-selector ) ⇒ <code >boolean</code >
23
+ - [ checkVisibility(selector, mode)] ( #checkvisibility-selector-mode ) ⇒ <code >boolean</code >
24
+ - [ isVisible(selector)] ( #isvisible-selector ) ⇒ <code >boolean</code >
25
+ - [ isHidden(selector)] ( #ishidden-selector ) ⇒ <code >boolean</code >
12
26
13
- * [ js-css-animations] ( #module_js-css-animations )
14
- * [ ~ animationFunctions] ( #module_js-css-animations..animationFunctions ) : <code >Object</code >
15
- * [ ~ eventBoundAnimations] ( #module_js-css-animations..eventBoundAnimations ) : <code >Object.< ; string, function()> ; </code >
16
- * [ ~ verifyAnimationName] ( #module_js-css-animations..verifyAnimationName ) : <code >ProxyHandler</code >
17
- * [ .get(animations, name)] ( #module_js-css-animations..verifyAnimationName.get )
18
- * [ ~ jsCssAnimations] ( #module_js-css-animations..jsCssAnimations ) : <code >Object.< ; string, (function()\| Object)> ; </code >
19
- * [ ~ selectElement(selector)] ( #module_js-css-animations..selectElement ) ⇒
20
- * [ ~ selectAllElements(selector)] ( #module_js-css-animations..selectAllElements ) ⇒
21
- * [ ~ getTargets(selector)] ( #module_js-css-animations..getTargets ) ⇒
22
- * [ ~ toggle(selector, animA, animB, opts)] ( #module_js-css-animations..toggle )
23
- * [ ~ element] ( #module_js-css-animations..toggle..element )
24
- * [ ~ checkTransform(selector)] ( #module_js-css-animations..checkTransform ) ⇒
25
- * [ ~ checkVisibility(selector, mode)] ( #module_js-css-animations..checkVisibility ) ⇒ <code >boolean</code >
26
- * [ ~ isVisible(selector)] ( #module_js-css-animations..isVisible ) ⇒
27
- * [ ~ isHidden(selector)] ( #module_js-css-animations..isHidden ) ⇒
28
-
29
- <a name =" module_js-css-animations..animationFunctions " ></a >
30
-
31
- ### js-css-animations~ animationFunctions : <code >Object</code >
32
- 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
33
-
34
- ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #module_js-css-animations )
27
+ ### animationFunctions : <code >Object</code >
28
+
29
+ An object containing all the animations functions.
30
+
31
+ Visibility animations functions are under
32
+ animationFunctions.hide and animationFunctions.show
33
+
34
+ All other keys of animationFunctions are Motion animations functions
35
+
36
+ ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #js-css-animations )
35
37
** See**
36
38
37
39
- [ module: globals .VISIBILITY_ANIMS_ID] ( module:globals.VISIBILITY_ANIMS_ID )
38
40
- [ module: globals .MOTION_ANIMS_ID] ( module:globals.MOTION_ANIMS_ID )
39
41
40
- < a name = " module_js-css-animations.. eventBoundAnimations" ></ a >
42
+ ### eventBoundAnimations : < code >Object. & lt ; string, function() & gt ; </ code >
41
43
42
- ### js-css-animations~ eventBoundAnimations : <code >Object.< ; string, function()> ; </code >
43
44
An object containing animations functions wich are triggered by an event (like 'click')
44
45
45
- ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #module_js-css-animations )
46
- <a name =" module_js-css-animations..verifyAnimationName " ></a >
46
+ ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #js-css-animations )
47
+
48
+ ### verifyAnimationName : <code >ProxyHandler</code >
47
49
48
- ### js-css-animations~ verifyAnimationName : <code >ProxyHandler</code >
49
50
Will throw an ReferenceError if the animation name does not corresponds to any animation function
50
51
51
- ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #module_js-css-animations )
52
- <a name =" module_js-css-animations..verifyAnimationName.get " ></a >
52
+ ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #js-css-animations )
53
53
54
54
#### verifyAnimationName.get(animations, name)
55
- ** Kind** : static method of [ <code >verifyAnimationName</code >] ( #module_js-css-animations..verifyAnimationName )
56
55
57
- | Param | Type | Description |
58
- | --- | --- | --- |
56
+ ** Kind** : static method of [ <code >verifyAnimationName</code >] ( #verifyanimationname )
57
+
58
+ | Param | Type | Description |
59
+ | ---------- | ---------------------------------------------- | ------------------------------------- |
59
60
| animations | <code >Object.< ; string, function()> ; </code > | Object containing animation functions |
60
- | name | <code >string</code > | Name of the animation |
61
+ | name | <code >string</code > | Name of the animation |
62
+
63
+ ### jsCssAnimations : <code >Object.< ; string, (function()\| Object)> ; </code >
61
64
62
- <a name =" module_js-css-animations..jsCssAnimations " ></a >
65
+ An API encapsulating all the functions that can be used by the user,
66
+ like all the animations functions and auxiliary functions like
67
+ isTransformed(), isVisible() and isHidden()
63
68
64
- ### js-css-animations~ jsCssAnimations : <code >Object.< ; string, (function()\| Object)> ; </code >
65
- 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()
69
+ ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #js-css-animations )
66
70
67
- ** Kind** : inner constant of [ <code >js-css-animations</code >] ( #module_js-css-animations )
68
- <a name =" module_js-css-animations..selectElement " ></a >
71
+ ### selectElement(selector) ⇒ <code >HTMLElement</code >
69
72
70
- ### js-css-animations~ selectElement(selector) ⇒
71
- 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.
73
+ If 'selector' is a string containing a valid CSS selector,
74
+ it will be used to perform a querySelector(),
75
+ If 'selector' is already an HTMLElement it will be returned as it is.
72
76
73
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js -css-animations )
74
- ** Returns** : An HTMLElement
77
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js -css-animations )
78
+ ** Returns** : An HTMLElement
75
79
76
- | Param | Type | Description |
77
- | --- | --- | --- |
80
+ | Param | Type | Description |
81
+ | -------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------- --- |
78
82
| selector | <code >Element</code > \| <code >string</code > | If it's an HTMLElement, 'selector' will be returned as it is. If it's a string, it should be a valid CSS selector |
79
83
80
- < a name = " module_js-css-animations.. selectAllElements" ></ a >
84
+ ### selectAllElements(selector) ⇒ < code >NodeList. & lt ; Element & gt ; </ code >
81
85
82
- ### js-css-animations~ selectAllElements(selector) ⇒
83
86
Returns a NodeList with all elements that match 'selector'
84
87
85
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js -css-animations )
86
- ** Returns** : A NodeList containing all elements matched by the 'selector'
88
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js -css-animations )
89
+ ** Returns** : A NodeList containing all elements matched by the 'selector'
87
90
88
- | Param | Type | Description |
89
- | --- | --- | --- |
91
+ | Param | Type | Description |
92
+ | -------- | ------------------- | ---------------------------------------------------- --- |
90
93
| selector | <code >string</code > | A valid CSS selector to be passed to querySelectorAll() |
91
94
92
- < a name = " module_js-css-animations.. getTargets" ></ a >
95
+ ### getTargets(selector) ⇒ < code >NodeList. & lt ; Element & gt ; </ code > \| < code >Array. & lt ; HTMLElement & gt ; </ code >
93
96
94
- ### js-css-animations~ getTargets(selector) ⇒
95
97
Gets the element(s) to be animated. The user can pass either an HTMLElement or a CSS selector as a target to the animation
96
98
97
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js -css-animations )
98
- ** Returns** : An array containing a single HTMLElement or a NodeList with all the elements matching the CSS selector in 'selector'
99
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js -css-animations )
100
+ ** Returns** : An array containing a single HTMLElement or a NodeList with all the elements matching the CSS selector in 'selector'
99
101
100
- | Param | Type | Description |
101
- | --- | --- | --- |
102
+ | Param | Type | Description |
103
+ | -------- | ----------------------------------------------- | ---------------------------------------------------------------------- --- |
102
104
| selector | <code >HTMLElement</code > \| <code >string</code > | An HTMLElement or a valid CSS selector to be passed to querySelectorAll() |
103
105
104
- < a name = " module_js-css-animations.. toggle" ></ a >
106
+ ### toggle(selector, animA, animB, opts)
105
107
106
- ### js-css-animations~ toggle(selector, animA, animB, opts)
107
- 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.
108
+ Toggles between two animations.
108
109
109
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js-css-animations )
110
- ** See** : [ module: globals .VISIBILITY_ANIMS_ID] ( module:globals.VISIBILITY_ANIMS_ID )
110
+ If 'animA' and 'animB' have the same name,
111
+ it will toggle between the 'hide' state and the 'show' state,
112
+ although this is only applicable to visibility animations.
111
113
112
- | Param | Type | Description |
113
- | --- | --- | --- |
114
- | selector | <code >HTMLElement</code > \| <code >string</code > | The DOM element or a valid CSS selector with the element(s) to be animated |
115
- | animA | <code >string</code > | The initial animation name |
116
- | animB | <code >string</code > | The next animation name |
117
- | opts | <code >Object</code > \| <code >Object</code > | All options that can be passed by the user to customize the animation |
114
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js-css-animations )
115
+ ** See** : [ module: globals .VISIBILITY_ANIMS_ID] ( module:globals.VISIBILITY_ANIMS_ID )
118
116
119
- <a name =" module_js-css-animations..toggle..element " ></a >
117
+ | Param | Type | Description |
118
+ | -------- | ----------------------------------------------- | -------------------------------------------------------------------------- |
119
+ | selector | <code >HTMLElement</code > \| <code >string</code > | The DOM element or a valid CSS selector with the element(s) to be animated |
120
+ | animA | <code >string</code > | The initial animation name |
121
+ | animB | <code >string</code > | The next animation name |
122
+ | opts | <code >Object</code > \| <code >Object</code > | All options that can be passed by the user to customize the animation |
120
123
121
124
#### toggle~ element
122
- 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'
123
125
124
- ** Kind** : inner constant of [ <code >toggle</code >] ( #module_js-css-animations..toggle )
125
- <a name =" module_js-css-animations..checkTransform " ></a >
126
+ The current animation attribute will only be set in the first element that
127
+ matches the 'selector' passed, but the animation will apply to all elements
128
+ matched by 'selector'
129
+
130
+ ** Kind** : inner constant of [ <code >toggle</code >] ( #toggle-selector-anima-animb-opts )
126
131
127
- ### js-css-animations~ checkTransform(selector) ⇒
128
- Verifies if an element is out of its original orientation or scale. Note that if the element has CSS property 'transform: rotate(0deg)', checkTransform() will still return False, as the element is not out of its original orientation.
132
+ ### checkTransform(selector) ⇒ <code >boolean</code >
129
133
130
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js-css-animations )
131
- ** Returns** : True if the element was rotated from its original orientation. False if it maintains the original orientation.
134
+ Verifies if an element is out of its original orientation or scale.
132
135
133
- | Param | Type | Description |
134
- | --- | --- | --- |
136
+ Note that if the element has CSS property 'transform: rotate(0deg)',
137
+ checkTransform() will still return False, as the element is not
138
+ out of its original orientation.
139
+
140
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js-css-animations )
141
+ ** Returns** : True if the element was rotated from its original orientation. False if it maintains the original orientation.
142
+
143
+ | Param | Type | Description |
144
+ | -------- | ----------------------------------------------- | --------------------------------------------------------------- |
135
145
| selector | <code >HTMLElement</code > \| <code >string</code > | An element or a valid CSS selector corresponding to the element |
136
146
137
- < a name = " module_js-css-animations.. checkVisibility" ></ a >
147
+ ### checkVisibility(selector, mode) ⇒ < code >boolean</ code >
138
148
139
- ### js-css-animations~ checkVisibility(selector, mode) ⇒ <code >boolean</code >
140
149
Verifies if a given element is hidden or visible
141
150
142
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js -css-animations )
143
- ** Returns** : <code >boolean</code > - True or False depending if the element is visible or hidden, according to the 'mode' passed
151
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js -css-animations )
152
+ ** Returns** : <code >boolean</code > - True or False depending if the element is visible or hidden, according to the 'mode' passed
144
153
145
- | Param | Type | Description |
146
- | --- | --- | --- |
154
+ | Param | Type | Description |
155
+ | -------- | ------------------------------------------- | ------------------------------------------------------------ --- |
147
156
| selector | <code >Element</code > \| <code >string</code > | An element or a valid CSS selector corresponding to the element |
148
- | mode | <code >string</code > | Either 'visible' or 'hidden' |
157
+ | mode | <code >string</code > | Either 'visible' or 'hidden' |
149
158
150
- < a name = " module_js-css-animations.. isVisible" ></ a >
159
+ ### isVisible(selector) ⇒ < code >boolean</ code >
151
160
152
- ### js-css-animations~ isVisible(selector) ⇒
153
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js-css-animations )
154
- ** Returns** : True if the element is visible, False otherwise
161
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js-css-animations )
162
+ ** Returns** : True if the element is visible, False otherwise
155
163
156
- | Param | Type | Description |
157
- | --- | --- | --- |
164
+ | Param | Type | Description |
165
+ | -------- | ------------------------------------------- | -------------------------------- --- |
158
166
| selector | <code >Element</code > \| <code >string</code > | Dom element or a valid CSS selector |
159
167
160
- < a name = " module_js-css-animations.. isHidden" ></ a >
168
+ ### isHidden(selector) ⇒ < code >boolean</ code >
161
169
162
- ### js-css-animations~ isHidden(selector) ⇒
163
- ** Kind** : inner method of [ <code >js-css-animations</code >] ( #module_js-css-animations )
164
- ** Returns** : True if the element is hidden, False otherwise
170
+ ** Kind** : inner method of [ <code >js-css-animations</code >] ( #js-css-animations )
171
+ ** Returns** : True if the element is hidden, False otherwise
165
172
166
- | Param | Type | Description |
167
- | --- | --- | --- |
173
+ | Param | Type | Description |
174
+ | -------- | ------------------------------------------- | -------------------------------- --- |
168
175
| selector | <code >Element</code > \| <code >string</code > | Dom element or a valid CSS selector |
169
-
0 commit comments