framation
v1.1.8
Published
animate util using javascript and jquery
Downloads
1
Maintainers
kernyooReadme
framation
Animation utility plugin using javascript or jquery
Install
- 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>Usage
- 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 100pxFramation
Kind: 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()
new Framation()
Framation class
Animate.this.isIE : boolean
is IE browser
Kind: static property of Animate
Animate.this.isAnimation : boolean
animation operate
Kind: static property of Animate
Animate.this.enable : boolean
animation enable
Kind: static property of Animate
Animate.this.queue : Array
animation queue
Kind: static property of Animate
Animate.this.div : boolean
animation target div
Kind: static property of Animate
Animate.this.cssEase : Object
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) |
Animate.this.transform : string
transform
Kind: static property of Animate
Animate.this.transition : string
transition
Kind: static property of Animate
Animate.this.transitionDuration : string
transition duration
Kind: static property of Animate
Animate.this.transitionTimingFunction : string
transition timing function
Kind: static property of Animate
Animate.this.transform3d : boolean
transform 3d
Kind: static property of Animate
Animate.getVendorPropertyName() ⇒ string
return prop name using browser engine
Kind: static method of Animate Returns: string - prop name
Animate.checkTransform3dSupport() ⇒ boolean
return support 3d transform
Kind: static method of Animate Returns: boolean - transform3d support
Animate.getTransform(style) ⇒ Object
return target's transform to object
Kind: static method of Animate Returns: Object - transform object
| Param | Type | Description | | --- | --- | --- | | style | Object | style object |
Animate.clear() ⇒ Object
clear animation
Kind: static method of Animate Returns: Object - Ani Example
ani1
.clear();
ani
.set(function () {
});Animate.pause() ⇒ Object
pause animation
Kind: static method of Animate Returns: Object - Ani Example
ani1
.set({target, 'left', '50%'})
.pause();Animate.play() ⇒ Object
play animation
Kind: static method of Animate Returns: Object - Ani
Animate.set() ⇒ Object
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');
}
})Animate.destroy()
destory animate