moveMe
Move HTML DOM elements on the fly!
Install
$ npm install --save moveme # or yarn add -D moveme
Usage
import * as moveMe from 'moveme';
const someElement = document.querySelector('#someId');
// Moves to the next position relative to the parent
moveMe.toNext(someElement);
// Moves to the previous position relative to the parent
moveMe.toPrevious(someElement);
// Moves to the last position of the parent node
moveMe.toLast(someElement);
// Moves to the first position of the parent node
moveMe.toFirst(someElement);
// Moves to the third position of the parent node
moveMe.toPosition(someElement, 3);
// You can also set additional options
moveMe.toNext(someElement, {
duration: '.6s',
timingFunction: 'linear',
delay: '1s'
});
API
moveMe.toNext(element, [options])
Moves the given HTML DOM element to the next position relative to its current position.
moveMe.toPrevious(element, [options])
Moves the given HTML DOM element to the previous position relative to its current position.
moveMe.toFirst(element, [options])
Moves the given HTML DOM element to the first position of the parent node.
moveMe.toLast(element, [options])
Moves the given HTML DOM element to the last position of the parent node.
moveMe.toPosition(element, position, [options])
Moves the given HTML DOM element to the given position of the parent node.
Note: When a movement is not possible, either a position is not value or the element is already at the requested position, all methods will stop with a return
statement.
Arguments
element
Type: object
HTML DOM element to move.
position
Type: number
Position where to move the element.
options
Type: object
animation
Type: string
Values: fadeInOut
none
Default: fadeInOut
Animation name for the element's effect movement. It makes use of CSS transitions.
duration
Type: string
Default: .4s
Duration of the transition effect. See transition duration docs.
timingFunction
Type: string
Default: ease-in-out
Timing function name of the transition effect. See transition timing function docs.
delay
Type: string
Default: 0s
Delay of the transition effect. See transition delay docs.
License
MIT © Hugo Matalonga