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:
Members
(inner, constant) TRANSITION_TIMER_GRACE
Milliseconds added to a transition timer so it cannot land before the transition it is timing. A timer that fires a frame early tears the inline height off mid transition, which shows as a snap at the end of an otherwise smooth animation.
- 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) slide(element, from, open, callbackopt)
Slides an element's height to or from its content height, without touching display.
The counterpart to slideUp()/slideDown() for elements whose visibility something else
already owns - a <details> panel, a popover, a dialog. Those hide their own contents,
so a slide that also sets display fights them: on <details> in particular a leftover
inline display: none survives the close and then hides the panel body even after the
browser reopens it for find-in-page.
The starting height is yours to pass, which is what makes an interrupted slide recoverable: hand it the element's current height and it picks up from where the last one stopped instead of jumping. Reduced motion, or no height transition in the CSS, finishes immediately and still calls back.
The caller is responsible for the element being rendered before the call - an unrendered box has no height to measure and the slide has nothing to animate.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
element |
HTMLElement
|
||
from |
number
|
The height in pixels to start from, usually 0 or the current height |
|
open |
boolean
|
True to slide to the content height, false to slide to 0 |
|
callback |
function
|
<optional> |
Called when the slide ends, with the element |
Example
// open, from collapsed
details.open = true
slide(content, 0, true)
// close, and only actually close once the slide is done
slide(content, content.offsetHeight, false, () => { details.open = false })(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