Declarative animation and machine state
npm install ani-machineAniMachine
==========
Declarative Animation and Simple Machine State.
- 4.5KB minified and Gzipped
Optional Dependencies
---------------------
- animate.css
- csshake
How to start
------------
Add JS dependency
``html`
At the end of DOM
`html`
Enter Animation
---------------
!enter!
Add __data-am__ attribute on DOM element with __":enter"__ special keyword
`html`HelloWorld
State
-----
!state
__default__ state is declare with __data-am__
`html
data-am=":on enter :animate pulse
:on leave :animate tada">
_Here we define animation on mouseenter and mouseleave_If you want to declare a __next__ state
`html
data-am=""
data-am-next=":on enter :animate bounce">
How to change state ?
---------------------
!changestate!
You need to use __":go"__ keyword followed by state name to change state when played animation is finished
`html
data-am=":enter left move 500px :go next"
data-am-next=":on enter :animate pulse
:on leave :animate tada">
How to launch CSS Animation ?
---------------------------
Add __":animate"__ keyword followed by animation CSS class name
`html
data-am=":animate tada">
Here we use animate.css class name, but it might be another css classTo chain CSS animation
`html
data-am=":animate tada pulse">
How to launch CSShake Animation ?
---------------------------
!shake!
Add __":shake"__ followed by csshake animation name you want to apply
`html
data-am=":shake slow">
How to trigger animation ?
------------------------
!trigger!
Use __":trigger"__ keyword
`html
data-am-special=":animate bounce
:trigger .btn--trigger click">
`
You can use default event
- click (click event)
- enter (mouseenter event)
- leave (mouseleave event)
- ...Autostart
---------
By default, all DOM element with __data-am__ attribute will be in __default__ state
Reveal Animation
----------------
Special state name are use to specify animations you want to play when element is entering or leaving the viewport.
You can trigger animation with state __enter__
`html
data-am-enter=":enter left move 500px">
`
or state __leave__
`html
data-am-leave=":animate bounceOutRight">
`Before and After Callbacks
--------------------------
You can bind __":before"__ or __":after"__ callback animation event
`html
data-am-enter=":before beforeFn() :enter left move 500px :after afterFn()">
``html
`> element is DOM element which call the callback
How to add a pause ?
------------------
You can use __":wait"__ to make a pause before running animation or after
`html
data-am-enter=":wait 0.2s :animate pulse">
``Release History
---------------
- v0.1.9:
- add :wait operator
- add element as first parameter in before and after callbacks
- remove some old browser compatibility codes
- v0.1.8: remove all dependencies
- v0.1.7: initial revision working with AngularJS
Browser Support
---------------
- IE10+
- Chrome4+
- Safari8+
- FF5+
- Opera12+
License
-------
Copyright (c) 2017 John Fischer
Licensed under the MIT license.