Skip to content

Commit 70cdfbf

Browse files
igorMSoaresigorMSoares
committed
docs: fix js-css-animations.md anchors
1 parent c1d3984 commit 70cdfbf

File tree

2 files changed

+118
-112
lines changed

2 files changed

+118
-112
lines changed

‎docs/js-css-animations.md

Lines changed: 105 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -4,166 +4,172 @@ title: js-css-animations
44

55
# js-css-animations
66

7-
<a name="module_js-css-animations"></a>
7+
## js-css-animations.js
88

9-
## js-css-animations
109
Builds the animation API that will be exported to the final user
1110

11+
- [js-css-animations](#js-css-animations)
12+
- [animationFunctions](#animationfunctions) : <code>Object</code>
13+
- [eventBoundAnimations](#eventboundanimations) : <code>Object.&lt;string, function()&gt;</code>
14+
- [verifyAnimationName](#verifyanimationname) : <code>ProxyHandler</code>
15+
- [.get(animations, name)](#verifyanimationname-get-animations-name)
16+
- [jsCssAnimations](#jscssanimations) : <code>Object.&lt;string, (function()\|object)&gt;</code>
17+
- [selectElement(selector)](#selectelement-selector) ⇒ <code>HTMLElement</code>
18+
- [selectAllElements(selector)](#selectallelements-selector) ⇒ <code>NodeList.&lt;Element&gt;</code>
19+
- [getTargets(selector)](#gettargets-selector) ⇒ <code>NodeList.&lt;Element&gt;</code> \| <code>Array.&lt;HTMLElement&gt;</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>
1226

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.&lt;string, function()&gt;</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.&lt;string, (function()\|Object)&gt;</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 underanimationFunctions.hide and animationFunctions.showAll 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)
3537
**See**
3638

3739
- [module:globals.VISIBILITY_ANIMS_ID](module:globals.VISIBILITY_ANIMS_ID)
3840
- [module:globals.MOTION_ANIMS_ID](module:globals.MOTION_ANIMS_ID)
3941

40-
<a name="module_js-css-animations..eventBoundAnimations"></a>
42+
### eventBoundAnimations : <code>Object.&lt;string, function()&gt;</code>
4143

42-
### js-css-animations~eventBoundAnimations : <code>Object.&lt;string, function()&gt;</code>
4344
An object containing animations functions wich are triggered by an event (like 'click')
4445

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>
4749

48-
### js-css-animations~verifyAnimationName : <code>ProxyHandler</code>
4950
Will throw an ReferenceError if the animation name does not corresponds to any animation function
5051

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)
5353

5454
#### verifyAnimationName.get(animations, name)
55-
**Kind**: static method of [<code>verifyAnimationName</code>](#module_js-css-animations..verifyAnimationName)
5655

57-
| Param | Type | Description |
58-
| --- | --- | --- |
56+
**Kind**: static method of [<code>verifyAnimationName</code>](#verifyanimationname)
57+
58+
| Param | Type | Description |
59+
| ---------- | ---------------------------------------------- | ------------------------------------- |
5960
| animations | <code>Object.&lt;string, function()&gt;</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.&lt;string, (function()\|Object)&gt;</code>
6164

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()
6368

64-
### js-css-animations~jsCssAnimations : <code>Object.&lt;string, (function()\|Object)&gt;</code>
65-
An API encapsulating all the functions that can be used by the user,like all the animations functions and auxiliary functions likeisTransformed(), isVisible() and isHidden()
69+
**Kind**: inner constant of [<code>js-css-animations</code>](#js-css-animations)
6670

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>
6972

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.
7276

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
7579

76-
| Param | Type | Description |
77-
| --- | --- | --- |
80+
| Param | Type | Description |
81+
| -------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
7882
| 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 |
7983

80-
<a name="module_js-css-animations..selectAllElements"></a>
84+
### selectAllElements(selector) ⇒ <code>NodeList.&lt;Element&gt;</code>
8185

82-
### js-css-animations~selectAllElements(selector) ⇒
8386
Returns a NodeList with all elements that match 'selector'
8487

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'
8790

88-
| Param | Type | Description |
89-
| --- | --- | --- |
91+
| Param | Type | Description |
92+
| -------- | ------------------- | ------------------------------------------------------- |
9093
| selector | <code>string</code> | A valid CSS selector to be passed to querySelectorAll() |
9194

92-
<a name="module_js-css-animations..getTargets"></a>
95+
### getTargets(selector) ⇒ <code>NodeList.&lt;Element&gt;</code> \| <code>Array.&lt;HTMLElement&gt;</code>
9396

94-
### js-css-animations~getTargets(selector) ⇒
9597
Gets the element(s) to be animated. The user can pass either an HTMLElement or a CSS selector as a target to the animation
9698

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'
99101

100-
| Param | Type | Description |
101-
| --- | --- | --- |
102+
| Param | Type | Description |
103+
| -------- | ----------------------------------------------- | ------------------------------------------------------------------------- |
102104
| selector | <code>HTMLElement</code> \| <code>string</code> | An HTMLElement or a valid CSS selector to be passed to querySelectorAll() |
103105

104-
<a name="module_js-css-animations..toggle"></a>
106+
### toggle(selector, animA, animB, opts)
105107

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.
108109

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.
111113

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)
118116

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 |
120123

121124
#### toggle~element
122-
The current animation attribute will only be set in the first element thatmatches the 'selector' passed, but the animation will apply to all elementsmatched by 'selector'
123125

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)
126131

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 notout of its original orientation.
132+
### checkTransform(selector) ⇒ <code>boolean</code>
129133

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.
132135

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+
| -------- | ----------------------------------------------- | --------------------------------------------------------------- |
135145
| selector | <code>HTMLElement</code> \| <code>string</code> | An element or a valid CSS selector corresponding to the element |
136146

137-
<a name="module_js-css-animations..checkVisibility"></a>
147+
### checkVisibility(selector, mode) ⇒ <code>boolean</code>
138148

139-
### js-css-animations~checkVisibility(selector, mode) ⇒ <code>boolean</code>
140149
Verifies if a given element is hidden or visible
141150

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
144153

145-
| Param | Type | Description |
146-
| --- | --- | --- |
154+
| Param | Type | Description |
155+
| -------- | ------------------------------------------- | --------------------------------------------------------------- |
147156
| 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' |
149158

150-
<a name="module_js-css-animations..isVisible"></a>
159+
### isVisible(selector) ⇒ <code>boolean</code>
151160

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
155163

156-
| Param | Type | Description |
157-
| --- | --- | --- |
164+
| Param | Type | Description |
165+
| -------- | ------------------------------------------- | ----------------------------------- |
158166
| selector | <code>Element</code> \| <code>string</code> | Dom element or a valid CSS selector |
159167

160-
<a name="module_js-css-animations..isHidden"></a>
168+
### isHidden(selector) ⇒ <code>boolean</code>
161169

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
165172

166-
| Param | Type | Description |
167-
| --- | --- | --- |
173+
| Param | Type | Description |
174+
| -------- | ------------------------------------------- | ----------------------------------- |
168175
| selector | <code>Element</code> \| <code>string</code> | Dom element or a valid CSS selector |
169-

‎docs/transitions.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ Handle user defined transitions to not conflict with js-css-animations transitio
1010

1111
- [transitions](#transitions)
1212
- _static_
13-
- [.getCurrentTransition](#getcurrenttransition) ⇒ <code>string</code> \| <code>null</code>
14-
- [.getClassTransition](#getclasstransition) ⇒ <code>string</code>
15-
- [.appendTransition](#appendtransition)
16-
- [.setDimensionsTransitions](#setdimensionstransitions)
17-
- [.removeInlineTransition](#removeinlinetransition)
18-
- [.removeDimensionsTransitions](#removedimensionstransitions)
13+
- [getCurrentTransition](#getcurrenttransition) ⇒ <code>string</code> \| <code>null</code>
14+
- [getClassTransition](#getclasstransition) ⇒ <code>string</code>
15+
- [appendTransition](#appendtransition)
16+
- [setDimensionsTransitions](#setdimensionstransitions)
17+
- [removeInlineTransition](#removeinlinetransition)
18+
- [removeDimensionsTransitions](#removedimensionstransitions)
1919
- _inner_
20-
- [~getAllTransitions(cssProperties)](#getalltransitions-cssproperties) ⇒ <code>string</code>
21-
- [~transitions](#getalltransitions-transitions) : <code>Object</code>
22-
- [~properties](#getalltransitions-properties) : <code>Array.&lt;string&gt;</code>
23-
- [~getTransitionClassName(wTransit, hTransit)](#gettransitionclassname-wtransit-htransit) ⇒ <code>string</code> \| <code>undefined</code>
20+
- [getAllTransitions(cssProperties)](#getalltransitions-cssproperties) ⇒ <code>string</code>
21+
- [transitions](#getalltransitions-transitions) : <code>Object</code>
22+
- [properties](#getalltransitions-properties) : <code>Array.&lt;string&gt;</code>
23+
- [getTransitionClassName(wTransit, hTransit)](#gettransitionclassname-wtransit-htransit) ⇒ <code>string</code> \| <code>undefined</code>
2424

2525
### getCurrentTransition ⇒ <code>string</code> \| <code>null</code>
2626

@@ -110,9 +110,9 @@ for 'transition' CSS property
110110
| ------------- | -------------------------------- | ------------------------- |
111111
| cssProperties | <code>CSSStyleDeclaration</code> | A collection of CSS rules |
112112

113-
- [~getAllTransitions(cssProperties)](#getalltransitions) ⇒ <code>string</code>
114-
- [~transitions](#getalltransitions-transitions) : <code>Object</code>
115-
- [~properties](#getalltransitions-properties) : <code>Array.&lt;string&gt;</code>
113+
- [getAllTransitions(cssProperties)](#getalltransitions) ⇒ <code>string</code>
114+
- [transitions](#getalltransitions-transitions) : <code>Object</code>
115+
- [properties](#getalltransitions-properties) : <code>Array.&lt;string&gt;</code>
116116

117117
#### getAllTransitions~transitions : <code>Object</code>
118118

0 commit comments

Comments
 (0)