animore
Animore makes DOM state transitions easier It uses internally the css transitions to animate 2 different states of the same DOM node. It was inspired by riot-animore and works thanks to the flip technique by Paul Lewis
Demos
Installation
Via npm
$ npm i animore -S
Script import
Via <script>
Via ES2015 modules
Via commonjs
const animore =
Usage
Simple transitions
You can pass a query or a DOM node to animore
in the following way:
const animaQuery = 0 // animore returns always an array!const animaNode = 0 // DOM nodes are also validconst animaList = // an arrays are also validconst animaNodeList = // NodeLists are valid as well
Remeber to use stash
and apply
to create your transitions
const anima = 0anima // store the previous DOM positionanimaelstylemarginTop = '300px'anima // apply the transition
Options
The animore factory function accepts 2 arguments animore(el, options)
with the options
object you can specify how your animations should behave:
API
Any animore call will return an object with the following properties
animore.stash
Store the current DOM node position and size
@returns self
animore.apply
Apply the transition comparing the current DOM node state with its previous state (it can be called only after a stash
)
@returns self
animore.el
Reference to the DOM node queried
@returns HTMLElement