Animation utility plugin using javascript or jquery
- using npm
# npm
npm install framation --save
# yarn
yarn add framation- dowonload source & import script
<!doctype html>
<html>
<head>
<script src="path/to/framation.min.js"></script>
</head>
</html>- html
<div class="test"></div>- javascript
import Framation from 'framation';
// or
const Framation = require('framation');
var ani = new Framation();
ani
.set(document.querySelector('.test'), {left: '100px', time: 2000}) // test element move left 100px during 2seconds
.set(document.querySelector('.test'), {left: '200px', time: 2000}) // test element move left 200px during 2seconds after move left 100pxKind: global class
- Framation
- new Animate()
- .this.isIE :
boolean - .this.isAnimation :
boolean - .this.enable :
boolean - .this.queue :
Array - .this.div :
boolean - .this.cssEase :
Object - .this.transform :
string - .this.transition :
string - .this.transitionDuration :
string - .this.transitionTimingFunction :
string - .this.transform3d :
boolean - .getVendorPropertyName() ⇒
string - .checkTransform3dSupport() ⇒
boolean - .getTransform(style) ⇒
Object - .clear() ⇒
Object - .pause() ⇒
Object - .play() ⇒
Object - .set() ⇒
Object - .destroy()
Framation class
is IE browser
Kind: static property of Animate
animation operate
Kind: static property of Animate
animation enable
Kind: static property of Animate
animation queue
Kind: static property of Animate
animation target div
Kind: static property of Animate
css ease object
Kind: static property of Animate
Properties
| Name | Type | Description |
|---|---|---|
| _default | string |
ease |
| in | string |
ease-in |
| out | string |
ease-out |
| in-out | string |
ease-in-out |
| snap | string |
cubic-bezier(0,1,.5,1) |
| easeOutCubic | string |
cubic-bezier(.215,.61,.355,1) |
| easeInOutCubic | string |
cubic-bezier(.645,.045,.355,1) |
| easeInCirc | string |
cubic-bezier(.6,.04,.98,.335) |
| easeOutCirc | string |
cubic-bezier(.075,.82,.165,1) |
| easeInOutCirc | string |
cubic-bezier(.785,.135,.15,.86) |
| easeInExpo | string |
cubic-bezier(.95,.05,.795,.035) |
| easeInOutExpo | string |
cubic-bezier(1,0,0,1) |
| easeInQuad | string |
cubic-bezier(.55,.085,.68,.53) |
| easeOutQuad | string |
cubic-bezier(.25,.46,.45,.94) |
| easeInOutQuad | string |
cubic-bezier(.455,.03,.515,.955) |
| easeInQuart | string |
cubic-bezier(.895,.03,.685,.22) |
| easeOutQuart | string |
cubic-bezier(.165,.84,.44,1) |
| easeInOutQuart | string |
cubic-bezier(.77,0,.175,1) |
| easeInQuint | string |
cubic-bezier(.755,.05,.855,.06) |
| easeOutQuint | string |
cubic-bezier(.23,1,.32,1) |
| easeInOutQuint | string |
cubic-bezier(.86,0,.07,1) |
| easeInSine | string |
cubic-bezier(.47,0,.745,.715) |
| easeOutSine | string |
cubic-bezier(.39,.575,.565,1) |
| easeInOutSine | string |
cubic-bezier(.445,.05,.55,.95) |
| easeInBack | string |
cubic-bezier(.6,-.28,.735,.045) |
| easeOutBack | string |
cubic-bezier(.175, .885,.32,1.275) |
| easeInOutBack | string |
cubic-bezier(.68,-.55,.265,1.55) |
transform
Kind: static property of Animate
transition
Kind: static property of Animate
transition duration
Kind: static property of Animate
transition timing function
Kind: static property of Animate
transform 3d
Kind: static property of Animate
return prop name using browser engine
Kind: static method of Animate
Returns: string - prop name
return support 3d transform
Kind: static method of Animate
Returns: boolean - transform3d support
return target's transform to object
Kind: static method of Animate
Returns: Object - transform object
| Param | Type | Description |
|---|---|---|
| style | Object |
style object |
clear animation
Kind: static method of Animate
Returns: Object - Ani
Example
ani1
.clear();
ani
.set(function () {
});pause animation
Kind: static method of Animate
Returns: Object - Ani
Example
ani1
.set({target, 'left', '50%'})
.pause();play animation
Kind: static method of Animate
Returns: Object - Ani
animation set
Kind: static method of Animate
Returns: Object - Ani
Example
ani1
.set(target, 'left', '50%') // move target element left 50%
.set(target2, { time: 1000, left: '0%' }) // move target2 element left 0%
.set(function () { // animation pause and start after 2seconds
var self = this,
timer = null;
this.pause();
console.log('pause');
timer = setTimeout(function () {
self.play();
console.log('play');
}, 2000);
})
.set(target, {ease: 'easeInOutBack', time: 4000, left: '50%', top: '50%'}) // target element set ease and left 50%, top 50% during 4s
.set(target, { // target add test class maintain animation 1s
time: 1000,
func: function () {
$(target).addClass('test');
}
})destory animate