A collection of functions animating element transitions. Substitutes for jQuery's "animation" functions slideUp(), slideDown(), slideToggle(), fadeIn(), fadeOut() functions. Leans onto CSS transitions, reading the height transition duration and setting a timer based on that to clear the height property on animation end. There is a unique reason for this, for instance animating height is ony possible through max-height, and if the max-height, which can produce inconsistent animation duration depending on the element's actual height. Or, animating display none to display block, this can be done via opacity and pointer-events:none this means the element will have to overlay the screen but be inaccessible. This module provides "javascript wrappers" that substitute the shortcomings of the CSS transitions regarding these two cases.
- Source:
Methods
(static) fadeIn(element, callbackopt, transitionStartCallbackopt)
Fades in an element. The element must have a CSS transition set for the opacity property, and initial opacity to 0. The transition duration is used to determine how long the fade in animation will take. Substitutes for jQuery's fadeIn() function.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
callback |
function
|
<optional> |
callback function to be called when the transition ends |
transitionStartCallback |
function
|
<optional> |
callback function to be called when the transition starts |
Example
fadeIn(element)(static) fadeOut(element, callbackopt, transitionStartCallbackopt)
Fades out an element. The element must have a CSS transition set for the opacity property. The transition duration is used to determine how long the fade out animation will take. Substitutes for jQuery's fadeOut() function.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
callback |
function
|
<optional> |
callback function to be called when the transition ends |
transitionStartCallback |
function
|
<optional> |
callback function to be called when the transition starts |
Example
fadeOut(element)(static) fadeToggle(element, callbackopt, transitionStartCallbackopt)
Toggles the fade state of an element. The element must have a CSS transition set for the opacity property. The transition duration is used to determine how long the fade animation will take. Substitutes for jQuery's fadeToggle() function.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
callback |
function
|
<optional> |
callback function to be called when the transition ends |
transitionStartCallback |
function
|
<optional> |
callback function to be called when the transition starts |
Example
fadeToggle(element)(static) slideDown(element, callbackopt, transitionStartCallbackopt)
Slides down an element. The element must have a CSS transition set for the height property. The transition duration is used to determine how long the slide down animation will take. Substitutes for jQuery's slideDown() function.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
callback |
function
|
<optional> |
callback function to be called when the transition ends |
transitionStartCallback |
function
|
<optional> |
callback function to be called when the transition starts |
Example
slideDown(element)(static) slideToggle(element, callbackopt, transitionStartCallbackopt)
Toggles the slide state of an element. The element must have a CSS transition set for the height property. The transition duration is used to determine how long the slide animation will take. Substitutes for jQuery's slideToggle() function.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
callback |
function
|
<optional> |
callback function to be called when the transition ends |
transitionStartCallback |
function
|
<optional> |
callback function to be called when the transition starts |
Example
slideToggle(element)(static) slideUp(element, callbackopt, transitionStartCallbackopt)
Slides up an element. The element must have a CSS transition set for the height property. The transition duration is used to determine how long the slide up animation will take. Substitutes for jQuery's slideUp() function.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
callback |
function
|
<optional> |
|
transitionStartCallback |
function
|
<optional> |
callback function to be called when the transition starts |
Example
slideUp(element)(inner) clearTransitionTimer(element, propertyopt)
Clears the property transition timer of an element. Timer ID is stored in the element's dataset, under the propertyTransitionTimer key.
- Source:
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
element |
HTMLElement
|
|||
property |
string
|
<optional> |
'all' |
The property to clear the timer for. Defaults to 'all', thus the key in the dataset will be allTransitionTimer. |
(inner) setTransitionDuration(element)
Sets the slide duration of an element. The element must have a CSS transition set for the height property. The CSS transition duration is used to determine how long the slide animation will take.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
element |
HTMLElement
|
(inner) setTransitionTimer(element, propertyopt, timeout, callback) → {number|null}
Assigning a timer for a selected property and binding the timerID in the element's property for later retrieval for clearing
- Source:
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
element |
HTMLElement
|
|||
property |
string
|
<optional> |
'all' | |
timeout |
number
|
in milliseconds |
||
callback |
function
|
Returns:
- Type:
-
number|null
timer ID if timer is successfully created