0.8.9 • Published 7 years ago
mist.js v0.8.9
MIST
Motion Design in Modular CSS
Mist is a motion design library in modular CSS
Quick start
npm install mist.js --save
Or download
Features
- Using Modular CSS
- Using Style Tag
- Timing Control
Supported browser
- Chrome
- Edge
- Firefox
- IE
- Safari
Usage
Make modular CSS
var vivid = {
background: () => `hsl(${Math.random() * 360}, 50%, 50%)`
}
Design motion
mist('div')
// set color, wait 1s
.set(vivid).time(1000)
// set color, wait 1s
.set(vivid).time(1000)
// clear style
.clear();
Repeat this two-step, to build an interaction
mist( statement ): new
param | type |
---|---|
statement | selector string , element |
new | new mist |
New instance
API
Selector
Using Modular CSS, Style Tag
Timing Control
Utility
any( selector ): new
param | type |
---|---|
selector | string |
new | new mist |
Same as :any, :matches selector
not( selector ): new
param | type |
---|---|
selector | string |
new | new mist |
Same as :not selector
clear(): self
Clear modular CSS
clearAll(): self
Clear modular CSS each element
set( ...css ): self
param | type |
---|---|
css | { "name": string } , { "name": (now) => string } |
Set modular CSS
setAll( ...css ): self
param | type |
---|---|
css | { "name": string } , { "name": (element, i, all) => string } |
Set modular CSS each element
on( name ): promise
param | type |
---|---|
name | string |
promise | see |
Listen event emission
pause(): self
Pause CSS transition, time
resume(): self
Resume CSS transition, time
time( dur ): self
param | type |
---|---|
dur | milliseconds number |
Delay execution
call( responsor ): self
param | type |
---|---|
responsor | () => void |
Call passed function
Using promise
This library's promise like a Promise / A+, it's extended functions
resume()
The fullfilled or rejected promise back to pending
var emission = mist('div').on('click');
emission.then((e) => {
// your process
emission.resume();
});
when( success, err? ): promise
param | type |
---|---|
success | (response) => any |
err | (response) => any |
If you want to reuse callback function, to use
mist('div').on('click').when((e) => {
// your process
});
License
MIT © AI428