appendTo

function
 appendTo() 

Option name Type Description
element HTMLElement

The element to animate
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Inserts the given element as last child to the given target.
If the element was in the dom before it is animated
from the old position to the new position.

export function appendTo (element, target, options = {}) {
  return animorph(element, {
    target,
    ...options
  });
}
JSFiddle

prependTo

function
 prependTo() 

Option name Type Description
element HTMLElement

The element to animate
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Inserts the given element as first child to the given target.
If the element was in the dom before it is animated
from the old position to the new position.

export function prependTo (element, target, options = {}) {
  return animorph(element, {
    target,
    operation: 'prependTo',
    ...options
  });
}

remove

function
 remove() 

Option name Type Description
element HTMLElement

The element to animate
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Animate the given element and removes it from the dom after
the animation is complete

export function remove (element, options = {}) {
  return animorph(element, {
    operation: 'remove',
    ...options
  });
}

enter

function
 enter() 

Option name Type Description
element HTMLElement

The element to animate
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Adds classes for an enter animation

Flow:

  1. Changes the classes (without animation)
    • Add: ${namespace}-enter-prepare
    • Add: ${namespace}-enter
    • Add: ${namespace}-animate
  2. Changes the classes (with animation)
    • Add: ${namespace}-enter-active
    • Remove: ${namespace}-enter-prepare
  3. Waits for the animation to end
  4. Changes the classes (without animation)
    • Remove: ${namespace}-enter-active
    • Remove: ${namespace}-enter
    • Remove: ${namespace}-animate
  5. Fullfills the promise
export function enter (element, options = {}) {
  return animorph(element, {
    operation: 'enter',
    ...options
  });
}

leave

function
 leave() 

Option name Type Description
element HTMLElement

The element to animate
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Adds classes for a leave animation

Flow:

  1. Changes the classes (without animation)
    • Add: ${namespace}-leave-prepare
    • Add: ${namespace}-leave
    • Add: ${namespace}-animate
  2. Changes the classes (with animation)
    • Add: ${namespace}-leave-active
    • Remove: ${namespace}-leave-prepare
  3. Waits for the animation to end
  4. Changes the classes (without animation)
    • Remove: ${namespace}-leave-active
    • Remove: ${namespace}-leave
    • Remove: ${namespace}-animate
  5. Fullfills the promise
export function leave (element, options = {}) {
  return animorph(element, {
    operation: 'leave',
    ...options
  });
}

insertAfter

function
 insertAfter() 

Option name Type Description
element HTMLElement

The element to animate
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Inserts the given element to the dom after the given target.
If the element was in the dom before it is animated
from the old position to the new position.

export function insertAfter (element, target, options = {}) {
  return animorph(element, {
    target: target,
    operation: 'insertAfter',
    ...options
  });
}

replaceClasses

function
 replaceClasses() 

Option name Type Description
element HTMLElement

The element to animate
classNamesBefore Array.<String>

Custom classes to be removed
classNamesAfter Array.<String>

Custom classes to be added
["enter"|"leave"] String

Transition name: "enter"|"leave"
[options] Object

Animorph options like namespace @see animorph
return Promise

Promise of the animation

Adds and removes css-classes from the given element.

Flow:

  1. Changes the classes (without animation)
    • Add: ${namespace}-${transitionName}-prepare
    • Add: ${namespace}-${transitionName}
    • Add: ${namespace}-animate
  2. Changes the classes (with animation)
    • Add: ${namespace}-${transitionName}-active
    • Add: custom class names (optional)
    • Remove: ${namespace}-${transitionName}-prepare
    • Remove: custom class names (optional)
  3. Waits for the animation to end
  4. Changes the classes (without animation)
    • Remove: ${namespace}-${transitionName}-active
    • Remove: ${namespace}-${transitionName}
    • Remove: ${namespace}-animate
  5. Fullfills the promise
export function replaceClasses (element, classNamesBefore, classNamesAfter, transitionName = 'enter', options = {}) {
  return animorph(element, {
    addClasses: classNamesAfter,
    removeClasses: classNamesBefore,
    operation: transitionName,
    ...options
  });
}
Cayman is maintained by iwatakeshi.
This page was generated by Mr. Doc using the Cayman theme by Jason Long.